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本 书 从 初学 者 角度 出 发 ， 由 浅 入 深 、 循 序 渐进 地 介绍 了 使 用 Dreamweaver CS4 进行 网 页 制作 和 网 站 
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高 职高 专 教育 以 就 业 为 导向 ， 以 技术 应 用 型 人 才 为 培养 目标 ， 担 负 着 为 国家 经 济 高 速 
发 展 输送 一 线 高 素质 技术 应 用 人 才 的 重任 。 近 年 来 ， 随 着 我 国 高 等 职业 教育 的 发 展 ， 高 职 
院 校 数量 和 在 校生 人 数 均 有 了 大 幅 激 增 ， 已 经 成 为 我 国 高 等 教育 的 重要 组 成 部 分 。 

根据 目前 我 国 高 级 应 用 型 人 才 的 紧缺 情况 ， 教 育 部 联合 六 部 委 推出 “国家 技能 型 紧缺 
人 才 培 养 培训 项 目 ”， 并 从 2004 年 秋季 起 ， 在 全 国 两 百 多 所 学 校 的 计算 机 应 用 与 软件 技 
术 、 数 控 项 目 、 汽 车 维修 与 护理 等 专业 推行 两 年 制 和 三 年 制 改革 。 

为 了 配合 高 职高 专 院 校 的 学 制 改革 和 教材 建设 ,清华 大 学 出 版 社 在 主管 部 门 的 指导 
下 ， 组织 了 一 批 工作 在 高 等 职业 教育 第 一 线 的 资深 教师 和 相关 行业 的 优秀 工程 师 ， 编 写 了 
适应 新 教学 要 求 的 计算 机 系列 高 职高 专 教材 一 一 《计算 机 应 用 能 力 培 养 从 书 》。 该 从 书 主 要 
面向 高 等 职业 教育 ， 遵 循 “ 以 就 业 为 导向 ”的 原则 ， 根 据 企业 的 实际 需求 来 进行 课程 体系 设置 和 
教材 内 容 选 取 。 根 据 教材 所 对 应 的 专业 ， 以 “实用 ”为 基础 ， 以 “必需 ”为 尺度 ， 为 教材 选取 理 
论 知识 ， 注 重 和 提高 案例 教学 的 比重 ， 突 出 培养 人 才 的 应 用 能 力 和 实际 问题 解决 能 力 ， 满 足 高 等 
职业 教育 “学 校 评估 ”和 “社会 评估 ”的 双重 教学 特征 。 

每 本 教材 的 内 容 均 由 “授课 ”和 “ 实 训 ”两 个 互 为 联系 和 支持 的 部 分 组 成 ，“ 授 课 ” 部 分 
介绍 在 相应 课程 中 ， 学 生 必须 掌握 或 了 解 的 基础 知识 ， 每 章 都 设 有 “学 习 目 标 ”、“ 实 用 问题 
解答 ”、“ 小 结 ”、“ 习 题 ” 等 特色 段落 ; “ 实 训 ” 部 分 设置 了 一 组 源 于 实际 应 用 的 上 机 实例 ， 
用 于 强化 学 生 的 计算 机 操作 使 用 能 力 和 解决 实际 问题 的 能 力 。 每 本 教材 配套 的 习题 答案 、 电 子 
教案 和 一 些 教学 课件 ， 均 可 在 该 从 书 的 信息 支持 网 站 (http://www.tupwk.com.cn/GZGZ) 上 下 载 或 
通过 Email(wkservice@tup.tsinghua.edu.cn) 索 取 ， 读 者 在 使 用 过 程 中 遇 到 了 疑惑 或 困难 可 以 在 支 
持 网 站 的 互动 论坛 上 留言 ， 本 从 书 的 作者 或 技术 编辑 会 提供 相应 的 技术 支持 。 

Dreamweaver CS4 是 Macromedia 公司 (已 被 Adobe 公司 收购 ) 推 出 的 最 新 网 页 制作 工 
具 ， 拥 有 十 分 强大 的 功能 ， 并 针对 当前 Web 开发 的 新 特点 ， 集 成 了 Spry 框架 ， 使 得 可 以 
可 视 化 地 制作 Ajax 页 面 。 使 用 Dreamweaver CS4 可 以 非常 轻松 地 制作 出 跨越 不 同 平台 和 
浏览 器 的 专业 级 网 页 。 

本 书 依据 教育 部 《高 职高 专 教育 计算 机 公共 基础 课程 教学 基本 要 求 》 编 写 而 成 ， 针 对 
初学 人 员 的 特点 ， 从 Dreamweaver 网 页 制作 的 基础 知识 和 技能 入 手 ， 由 浅 入 深 、 循 序 渐进 
地 帮助 读者 掌握 Dreamweaver 这 个 利器 。 全 书 共 13 章 ， 第 1~8 章 介绍 Dreamweaver 网 页 
制作 的 基础 知识 ， 包 括 文本 、 图 像 、 超 级 链接 、Flash 动画 等 常见 网 页 元 素 的 添加 方法 ， 以 
及 行为 、 表 单 ， 使 用 CSS+Div 进行 网 页 布局 等 ， 第 9~11 章 介 绍 如 何 组 建 Dreamweaver 本 
地 站 点 , 框架 、 模 板 在 组 建站 点 时 发 挥 的 作用 ,以 及 远程 站 点 的 配置 ， 本 地 站 点 的 发 布 等 ; 
第 12 章 介 绍 Dreamweaver CS4 中 的 Ajax 技术 一 一 Spry 框架 的 用 法 ;为 提高 读者 的 综合 应 
用 能 力 ， 第 13 章 演示 一 个 完整 站 点 的 制作 过 程 。 

此 外 ,全书 遵循 Web 标准 来 制作 网 页 ， 气 弃 了 传统 的 以 表格 来 布局 页 面 的 做 法 ,而 改 
用 当前 流行 的 CSS+Div 网 页 布局 方式 ， 从 而 使 读者 从 一 开始 便 养 成 良好 的 制作 习惯 。 读 者 
还 可 通过 本 书 所 支持 的 网 站 下 载 学 习 过 程 中 的 素材 和 相关 文件 。 

由 于 计算 机 科学 技术 发 展 迅速 ， 再 者 受 自 身 水 平和 编写 时 间 所 限 ， 书 中 如 有 错误 或 不 
足 之 处 ， 欢 迎 广大 读者 对 我 们 提出 意见 或 建议 。 
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第 1 章 


导 论 


本 章 介 绍 网 页 的 基础 知识 ， 以 及 Dreamweaver CS4 的 工作 界面 和 基本 操作 。 通 过 本 章 
的 学 习 ， 应 该 完成 以 下 学 习 目 标 : 

YY 了解 网 页 的 工作 原理 

i 了 解 网 页 中 的 组 成 元 素 

f 了 解 制作 网 页 的 相关 工具 

fy 了解 并 掌握 网 页 的 设计 原则 

i 学 会 如 何 对 网 页 进行 构思 

ty 掌握 网 页 的 制作 流程 

ft 熟悉 并 学 会 定制 Dreamweaver CS4 的 工作 环境 

YY 学 会 新 建 、 编 辑 、 保 存 和 预览 页 面 


1.1 网 页 的 基础 知识 


Internet 实现 了 全 球 资源 的 共享 ,是 一 个 巨大 的 信息 库 , 而 用 于 承载 这 些 信息 的 便 是 网 
页 。 网 页 又 被 称 为 Web 页, 是 一 个 纯 文本 文件 , 它 以 超 文本 和 超 媒 体 为 技术 , 采用 HIML、 
CSS、XML 等 语言 来 描述 组 成 页 面 的 各 种 元 素 ， 包 括 文字 、 图 像 、 音 乐 等 ， 并 通过 客户 端 
浏览 器 进行 解析 ， 从 而 向 浏览 者 呈现 各 种 信息 。 


1.1.1 网 页 的 工作 机 制 


网 页 所 基于 的 底层 技术 是 HIML 和 HTTP， 在 过 去 ， 制 作 网 页 都 需要 专门 的 技术 人 员 
来 逐 行 编写 代码 ， 编 写 的 文档 称 为 HTML 文档 。 一 个 HTML 网 页 文件 包含 了 许多 HTML 
标签 ， 这 些 标 签 是 一 些 能 入 式 命令 ， 提 供 网 页 的 结构 、 外 观 和 内 容 等 信息 。Web 浏览 器 (如 
Internet Explorer、Maxthon、Firefox 等 ) 通 过 这 些 信息 来 决定 如 何 显示 网 页 。 下 面 的 代码 提 
供 了 一 个 普通 网 页 的 基本 组 成 结构 信息 : 

<HTML> 

<head> 

<title> 网 页 的 标题 </title> 
</head> 


<body> 
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网 页 的 正文 
</body> 
</HTML> 


然而 这 些 HTML 文档 类 型 的 网 页 仅仅 是 静态 的 网 页 ， 随 着 网 络 和 电子 商务 的 快速 发 


展 ， 人 们 要 求 网 页 有 更 好 的 用 户 体验 ， 包 括 更 好 的 交互 性 和 安全 性 。 于 是 产生 了 许多 网 页 
设计 新 技术 ， 包 括 ASP 技术 、JSP 技术 、PHP 技术 等 ， 采 用 这 些 技术 编写 的 网 页 文档 又 称 
为 ASP 文档 、JSP 文档 等 ,这 种 文档 类 型 的 网 页 由 于 采用 了 动态 页 面 技术 ,所 以 界面 往往 
拥有 更 佳 的 友好 性 和 交互 性 。 


无 论 是 ASP、JSP， 还 是 PHP， 它 们 都 基于 HTML 标签 ， 是 对 HTML 标签 的 扩展 。 它 


们 通过 将 VBScript、JavaScript 代码 内 嵌 于 HTML 标签 中 ， 来 构建 Web 应 用 程序 ， 从 而 实 
现 网 页 的 交互 性 。 例 如 ， 下 面 代码 (ASP 技术 ) 用 于 实现 根据 用 户 选择 来 进行 页 面 跳 转 : 


<HTML> 
<head> 
<title> 跳 转 到 的 页 面 </title> 
</head> 
<% Dim xuanze xuanze=Request .Form(“select")g%> 
<% Select Case xuanze 
Case 1 
Response.Redirect (‘http://www.tup.com.cn”) 
Case 2 
Response.Redirect (‘http://www.cmbook.cn’) 
Case 3 
Response.Redirect (“http://www.hep.edu.cn”) 
Case 4 
Response.Redirect (‘http://www.china-pub.com.cn”) 
End Select 
$> 
<body> 
网 页 的 正文 
</body> 
</HTML> 


用 户 通过 网 址 来 访问 网 页 。 网 页 的 网 址 又 称 为 URL( 统 一 资源 定位 器 )， 它 指出 了 网 页 


的 位 置 以 及 存 取 方 式 ， 如 http://auto.sina.com.cn/history/index.htm， 其 中 包括 如 下 几 个 部 分 : 
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? 通信 协议 : 也 就 是 http 部 分 , 除了 HITP 协议 外 , 网 络 中 常用 的 还 有 FTP、Gopher、 
News 等 。 

? 主机 名 : 也 就 是 auto.sina.com.cn 部 分 ， 指 出 了 网 站 的 主机 地 址 ， 当 然 也 可 以 用 诸 
如 202.103.185.242 的 卫 形式 来 表示 ， 效 果 是 一 样 的 。 

? 所 要 访问 的 文件 路 径 和 文件 名 : 也 就 是 /history/index.htm 部 分 ， 指 明了 要 访问 的 网 


页 文件 的 具体 位 置 ， 主 机 名 与 文件 路 径 之 间 用 “/” 符 号 隔 开 。 
六 什么 是 耳 地 址 ? 
所 IP 地 址 是 用 于 标识 网 络 中 计算 机 的 一 组 数字 号 码 ， 在 Web 浏览 器 中 输入 网 站 所 在 服务 器 的 
JP 地址 ， 即 可 访问 该 网 站 。 当 前 ，IPv4 定义 的 有 限 IP 地 址 空间 即将 被 耗 尽 ， 地 址 空间 的 不 足 必 


将 妨碍 Internet 的 进一步 发 展 。 为 此 ， 出 现 了 IPv6，IPv6 中 的 地 址 位 数 为 64 位 ， 即 有 2228-1 个 
IP 地 址 。IPv6 已 经 成 为 下 一 代 的 Internet 协议 , 将 在 3G、 个 人 智能 终端 、IP 电信 网 、 家 庭 游戏 、 


在 线 游 戏 等 业务 方面 发 挥 重 大 作用 。 


Web 服务 器 在 收 到 用 户 请 求 浏览 网 页 的 信息 后 ， 对 网 页 的 内 容 进行 解析 后 ， 将 解析 的 
结果 回馈 给 网 络 中 要 求 访问 该 网 页 的 浏览 器 并 进行 呈现 ， 这 个 过 程 如 图 1-1 所 示 。 


Internet 


客户 端 浏 览 器 


客户 端 浏 览 器 


图 1-1 网 页 的 访问 过 程 


根据 Web 服务 器 对 网 页 文件 的 处 理 过 程 ， 可 以 将 网 页 分 为 静态 网 页 和 动态 网 页 两 种 。 
静态 网 页 在 Web 服务 器 端 不 进行 处 理 ，Web 服务 器 只 负责 找到 站 点 内 用 户 请 求 的 网 页 文 
件 ， 然 后 直接 发 送 到 用 户 的 浏览 器 端 呈 现 。 这 类 网 页 通常 是 采用 HTML 语言 编写 的 网 页 ， 
虽然 制作 简单 ， 但 缺乏 灵活 性 。 

动态 网 页 则 需要 Web 服务 器 根据 用 户 提供 的 不 同 信息 而 进行 数据 处 理 , 从 而 动态 地 生 
成 不 同 的 网 页 内 容 ， 然 后 才 将 结果 发 送 到 浏览 器 端 呈现 。 这 类 网 页 通常 采用 ASP、PHP 或 
JSP 技术 来 制作 ， 读 者 除了 需要 具备 网 页 设计 的 基本 知识 外 ， 还 需要 掌握 相关 的 编程 知识 
和 数据 库 知识 。 建 议 初学 者 先 从 网 页 设计 的 基本 知识 入 手 。 


1.1.2 网 页 的 组 成 元 素 


网 页 由 多 种 元 素 组 成 ， 包 括 文本 、 图 像 、Flash 动画 、 声 音 、 视 频 、 超 链接 、 表 格 、 导 
航 栏 、 交 互 式 表单 等 ， 如 图 1-2 所 示 。 其 中 ， 文 本 和 图 像 是 网 页 中 最 基本 的 元 素 ， 是 网 页 
最 主要 的 信息 载体 。 

1. 文本 

文本 是 最 重要 的 网 页 信息 载体 与 交流 工具 ， 通 过 它 可 以 非常 详细 地 将 要 传达 的 信息 传 
送 给 浏览 者 。 而 且 文本 在 网 络 上 的 传输 速度 很 快 ， 用 户 可 以 很 方便 地 进行 浏览 和 下 载 。 

2. 图 像 

图 像 元 素 在 网 页 中 具有 提供 信息 并 展示 直观 形象 的 作用 ， 网 站 的 Logo( 标 志 )、 
Banner( 横 幅 ) 等 通常 采用 图 像 形式 来 表现 。 用 户 可 以 在 网 页 中 使 用 GIF、JPEG 和 PNG 等 多 
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种 文件 格式 的 图 像 ， 目 前 应 用 最 广泛 的 是 GIF 和 JPEG 格式 。 


蔬 葡 区 一 在 看 痢 地 莹 而 委 空 执 东 


我 们 一 直 走 在 


过 不 后 公告 
”Wa 
er i 


图 像 


交互 式 表单 一 上 [CE 


We aaa 
El 二 |] Ta [| 
超 链 接 “一 = 


文字 ts m ol A els emt 


图 1-2 网 页 的 组 成 元 素 


3. Flash 动画 

动画 在 网 页 中 的 作用 是 有 效 地 吸引 访问 者 更 多 的 注意 。 用 户 在 设计 制作 网 页 时 可 以 通 
过 在 页 面 中 加 入 动画 使 页 面 更 加 活泼 。 

4. 声音 

声音 是 多 媒体 和 视频 网 页 的 重要 组 成 部 分 。 用 户 在 为 网 页 添加 声音 效果 时 ， 应 充分 考 
虑 其 格式 、 文 件 大 小 、 品 质 和 用 途 等 因素 。 另 外 ， 不 同 的 浏览 器 对 声音 文件 的 处 理 方法 也 
有 所 不 同 ， 彼 此 之 间 有 可 能 并 不 兼容 。 

5. 视频 

视频 文件 的 采用 使 网 页 效果 更 加 精彩 且 富有 动感 。 常 见 的 视频 文件 格式 包括 RM、 
MPEG、AVI 和 DivX 等 。 

6. 超 链接 

超 链 接 是 从 一 个 网 页 指向 另 一 个 目的 端的 链接 ， 超 链接 的 目的 端 可 以 是 网 页 ， 也 可 以 
是 图 片 、 电 子 邮件 地 址 、 文 件 和 程序 等 。 当 网 页 访问 者 单 击 页 面 中 某 个 超 链 接 时 ， 将 根据 
自身 的 类 型 以 不 同 的 方式 打开 该 目的 端 。 

7. 导航 栏 

导航 栏 在 网 页 中 是 一 组 超 链 接 ， 其 链接 的 目的 端 是 网 站 中 重要 的 页 面 。 在 网 站 中 设置 
导航 栏 可 以 使 访问 者 既 快 又 容易 地 浏览 站 点 中 的 其 他 网 页 。 

8. 交互 式 表单 

表单 在 网 页 中 通常 用 来 联系 数据 库 并 接收 访问 用 户 在 浏览 器 端 输入 的 数据 。 表 单 的 
作用 是 收集 用 户 在 网 页 上 输入 的 联系 信息 、 接 受 请 求 、 反 馈 意见 、 设 置 签 名 以 及 登录 信 
息 等 。 
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网 页 中 除了 上 面 介绍 的 网 页 元 素 之 外 ， 还 包括 悬 停 按 钮 、Java 特效 、ActiveX 等 各 种 
特效 。 用 户 在 制作 网 页 时 可 以 使 用 它们 来 点 组 网 页 效果 ， 使 页 面 更 加 生动 有 趣 。 


1.1.3 网 页 制作 的 相关 工具 


早期 的 网 页 制作 主要 通过 手工 输入 HTML 代码 来 完成 ,工作 量 很 大 ， 随 着 计算 机 技术 
和 网 络 技术 的 发 展 ， 网 页 制作 工具 也 发 生 了 巨大 变化 ， 性 能 有 了 很 大 提高 。 

1. 网 页 编辑 工具 

Dreamweaver 是 一 款 专业 的 可 视 化 网 页 编辑 工具 ， 能 够 快速 创建 各 种 静态 、 动 态 的 网 
页 ， 而 且 生 成 的 代码 量 小 。 此 外 ，Dreamweaver 还 是 出 色 的 网 站 管理 和 维护 工具 ， 其 最 新 
版 本 为 Dreamweaver CS4。 

2. 图 像 处 理工 具 

网 页 中 比较 常用 的 图 像 文件 是 JPEG 和 GIF 图 像 ， 两 者 都 是 压缩 图 像 文件 ， 体 积 都 比 
较 小 ， 不 会 影响 网 页 的 下 载 时 间 。 处 理 这 些 图 像 的 工具 主要 有 Photoshop 和 Fireworks。 其 
中 ，Fireworks 是 Adobe 公司 专门 为 处 理 网 页 图 像 而 量 身 定做 的 图 形 图 像 处 理 软 件 ， 和 
Dreamweaver 有 很 好 的 兼容 性 和 互 操作 性 。 同 时 ， 它 内 置 的 许多 图 像 和 按钮 制作 功能 也 使 
网 页 制作 更 为 方便 和 快捷 。 
Photoshop 的 图 像 处 理 能 力 比 Fireworks 要 强大 ， 尤 其 是 它 的 滤 镜 功能 可 以 帮助 制作 出 
丰富 的 艺术 特效 ， 而 且 使 用 Photoshop 的 颜色 匹配 功能 可 以 很 好 地 统一 整个 页 面 的 风格 。 
因此 ， 制 作 一 些 高 端的 网 页 图 像 效 果 时 还 是 首选 Photoshop。 
3. 动画 制作 工具 
目前 最 为 流行 的 网 页 动画 制作 工具 莫 过 于 Flash， 它 所 制作 出 的 动画 文件 存储 空间 小 ， 
画面 可 任意 放 缩 而 不 影响 品质 ， 十 分 有 利于 网 上 传输 。 因 而 很 多 网 站 都 使 用 Flash 来 制作 
动画 ， 表 现 网 站 的 内 容 。 

4. 网 页 配色 工具 

网 页 中 色彩 的 把 握 是 网 页 制作 中 的 一 个 重点 和 难点 ， 使 用 一 些 专门 的 网 页 配色 软件 可 
以 方便 地 创建 网 页 配色 方案 ， 如 “ 玩 转 颜色 ”、“ 网 页 配色 ”等 。 此 外 ， 一 些 站 点 也 提供 
网 页 配色 服务 ， 如 “ 蓝 色 理想 ”、“sinid” 等 。 

5. 网 站 推广 工具 

为 了 提供 网 站 的 访问 量 ， 需 要 对 网 站 进行 宣传 和 推广 。 电 子 商务 师 、 登 录 骑 兵 、 网 站 
世界 排名 提升 专家 等 ， 都 是 比较 优秀 的 网 站 推广 软件 。 
1.1.4 网 页 的 设计 原则 

做 一 个 网 页 容易 ， 但 做 一 个 好 网 页 不 容易 ， 尤 其 是 优秀 的 网 页 。 它 不 是 信息 的 简单 
堆砌 ， 而 是 要 根据 网 页 的 特点 对 信息 进行 筛选 、 整 理 。 在 设计 过 程 中 ， 既 要 考虑 网 页 的 


布局 ， 又 要 考虑 色彩 的 搭配 、 整 体 的 协调 等 。 要 设计 好 一 个 网 页 ， 通 常 有 以 下 几 项 原则 需 
要 遵循 : 
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? 条 理 清晰 : 这 是 网 页 设计 需 遵 循 的 最 基本 原则 , 也 就 是 网 站 中 网 页 之 间 要 层次 分 明 ， 
结构 合理 。 要 将 收集 到 的 材料 有 机 地 组 织 起 来 ， 为 网 站 宣传 的 主题 服务 。 

? 简洁 : 目前 ， 网 速 仍然 是 遏制 网 络 传输 的 瓶颈 ， 要 使 自己 设计 的 网 页 获得 访问 者 的 
青睐 ， 提 高 下 载 速度 是 必要 条 件 之 一 。 因 而 在 制作 网 页 时 ， 应 尽量 避免 使 用 较 大 的 
图 片 、 音 频 、 视 频 等 信息 ， 避 免 网 页 体积 过 大 ， 尤 其 是 首页 。 

? 美观 : 网 页 设计 ， 不 只 是 一 个 技术 问题 ， 更 是 一 个 艺术 问题 。 网 页 的 设计 水 平 直接 
体现 了 设计 者 的 艺术 修养 。 在 设计 时 ,应 根据 不 同 的 性 质 确定 网 页 不 同 的 风格 ， 网 
页 之 间 风 格 要 一 致 ， 要 多 参考 其 他 同 种 类 型 的 网 页 ， 吸 取 他 人 优秀 之 处 。 此 外 ,在 
颜色 方面 ， 要 注重 色彩 之 间 的 平衡 。 

? 兼容 性 好 : 不 同 的 浏览 器 和 分 辩 率 ， 对 网 页 的 显示 效果 会 有 比较 大 的 影响 。 目 前 应 
用 最 多 的 浏览 器 是 微软 的 下 和 网 景 的 Navigator 两 种 ， 国 内 使 用 正 的 较 多 一 些 。 
网 页 设计 完成 以 后 ， 可 以 使 用 这 两 种 浏览 器 先 测试 一 下 ,没有 问题 后 再 进行 发 布 。 

除了 以 上 的 几 条 基本 原则 外 ， 在 设计 网 页 时 还 需要 注意 的 是 ， 要 力求 传达 信息 的 准确 

性 ， 因 为 网 页 中 大 量 使 用 了 超级 链接 技术 ， 错 误 的 内 容 会 etd se 直 
接 影响 到 网 站 的 整体 形象 。 设 计 并 上 传 成 功 的 网 页 并 不 意味 着 工作 的 结束 ， 当 今 二 
Ee nosihgneraeente sageis 
为 佼佼 者 。 

1.1.5 网 页 的 构思 


用 户 在 制作 网 页 之 前 ， 首 先 要 进行 网 页 的 设计 与 构思 。 在 网 页 设计 的 构思 阶段 需要 认 
真 考虑 网 页 的 主题 、 网 页 的 命名 、 网 站 标志 、 色 彩 搭配 和 字体 等 要 素 。 

1. 网 页 的 主题 

网 页 的 主题 指 的 是 网 页 的 题材 。 用 户 在 构思 网 页 主题 时 要 尽量 精准 ， 范 围 不 宜 过 大 ， 
内 容 要 尽量 提炼 精 要 。 最 好 选择 自己 了 解 的 主题 内 容 ， 这 样 在 制作 过 程 中 容易 收集 到 更 多 
的 网 页 素材 与 内 容 。 

2. 网 页 的 命名 

网 页 的 名 称 应 该 是 网 页 内 容 的 概括 ， 访 问 者 通过 网 页 的 名 称 就 能 够 了 解 网 页 包含 的 内 
容 题材 。 用 户 在 设计 网 页 名 称 的 时 候 ， 应 结合 网 页 的 主题 ， 尽 量 简短 精 要 ， 一 般 控制 在 6 
个 汉字 以 内 (如 新 浪 、 网 易 、 中 国 新 闻 网 、 中 国 雅虎 等 )。 网 页 名 称 的 字数 要 少 ， 以 便于 其 
他 站 点 链接 ， 因 为 站 点 的 友情 链接 标志 尺寸 一 般 为 88 像素 X31 像素 ， 而 6 个 汉字 的 宽度 
为 78 像素 左右 ， 刚 好 适合 。 

3. 网 站 的 标志 

网 站 的 标志 (Logo) 是 网 站 特色 和 内 容 的 集中 体现 ， 一 般 简 称 为 站 标 ， 放 置 在 主页 和 链 
接 页 面 上 ， 如 图 1-3 所 示 。 用 户 在 设计 网 站 的 标志 时 应 立足 于 网 页 的 名 称 和 内 容 ， 选 择 符 
合 站 点 特色 的 图 形 与 颜色 。 
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图 1-3 常见 的 网 站 Logo 
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4. 网 页 色彩 的 搭配 

网 页 给 访问 者 的 第 一 印象 来 自 其 页 面 颜色 的 视觉 冲击 。 网 页 色彩 的 选取 得 当 与 否 是 网 
站 能 否 成 功 的 重要 因素 ,不同 颜色 的 搭配 不 仅 会 产生 不 同 的 视觉 效果 ， 还 会 影响 浏览 者 的 
情绪 。 通 常 适 合 网 页 标准 的 颜色 有 黄 /橙色 、 蓝 色 、 黑 /灰色 三 大 系 。 另 外 ， 网 页 中 的 标准 
色彩 不 宜 过 多 , 太 多 的 颜色 会 使 人 眼花 练 乱 。 标 准 色彩 主要 应 用 于 网 站 的 标志 与 字体 颜色 。 

5. 字体 

网 页 中 标准 字体 指 的 是 用 于 网 站 标志 、 主 菜单 和 标题 的 特有 字体 。 默 认 的 字体 为 宋体 。 
用 户 在 制作 网 页 的 过 程 中 为 了 体现 网 页 的 特有 风格 ， 也 可 以 根据 需要 选择 一 些 特殊 字体 ， 
如 华文 行 楼、 方正 楷体 、 素 书 和 华文 新 魏 等 。 


1.1.6 网 页 的 制作 流程 


用 户 在 制作 网 页 的 过 程 中 ， 要 遵循 一 定 的 流程 才能 协调 分 配 整个 制作 过 程 的 资源 与 进 
度 。 网 页 的 设计 制作 步骤 按 先后 顺序 可 以 分 为 : 建立 目标 规划 、 设 计 页 面 版 式 、 收 集 与 加 
工 网 页 制作 素材 、 编 辑 网 页 内 容 、 测 试 并 发 布 网 页 这 几 个 部 分 。 

? 建立 目标 规划 : 用 户 在 制作 网 页 之 前 ， 必 须 首先 要 明确 网 页 的 制作 目标 ， 以 及 创建 

的 网 页 将 要 实现 的 效果 。 目 标明 确 后 ， 将 相关 的 设计 构思 打印 出 来 ， 作 为 今后 网 页 
设计 过 程 中 的 指导 依据 。 

? 设计 页 面 版 式 : 一 个 网 页 成 功 与 否 , 版式 设 计 是 很 重要 的 因素 。 用 户 在 设计 页 面 版 
式 的 过 程 中 ， 需 要 安排 网 页 中 文本 、 图 像 、 导 航 条 、 动 画 等 各 种 元 素 在 页 面 中 显示 
的 位 置 以 及 具体 数量 。 

? 收集 与 加 工 网 页 制作 素材 : 制作 网 页 所 需要 的 素材 包括 文字 、 图 像 、Flash 动画 、 
音乐 和 多 媒体 文件 等 。 用 户 可 以 通过 网 络 和 光盘 收集 所 需要 的 网 页 元 素 ， 再 使 用 
Fireworks 和 Flash 等 工具 软件 制作 出 符合 要 求 的 网 页 制作 素材 。 

? 编辑 网 页 内 容 : 完成 网 页 版 式 设计 和 网 页 素材 收集 工作 之 后 , 下 面 就 可 以 开始 具体 
实施 设计 ， 将 网 页 按照 设计 的 方案 设计 出 来 ， 通 过 Dreamweaver 等 网 页 编辑 工具 
软件 在 具体 的 页 面 中 添加 实际 内 容 。 在 这 个 阶段 , 用 户 需 要 对 网 页 进行 反复 地 编辑 
和 修改 ， 确 保 网 页 最 终 的 显示 效果 。 

? 测试 并 发 布 网 页 : 在 完成 网 页 的 制作 工作 之 后 , 用 户 需 要 对 网 页 效果 进行 充分 地 测 
试 ， 以 保证 页 面 中 各 元 素 都 能 正常 显示 。 为 了 使 其 他 用 户 可 以 通过 网 络 访问 网 页 ， 
还 必须 将 网 页 上 传 到 所 申请 的 远程 站 点 上 。 发 布 成 功 后 , 用 户 还 必须 时 常 更 新 网 页 
中 的 信息 以 保持 页 面 内 容 的 新 颖 。 


1.2 初 识 Dreamweaver CS4 


启动 Dreamweaver CS4， 利 用 出 现 的 “欢迎 屏幕 ”( 图 1-4 所 示 ) 可 以 快速 进入 最 近 使 用 
过 的 页 面 ， 只 需 在 【打开 最 近 的 项 目 】 列 表 中 单 击 该 页 面 名 称 即 可 。 如 果 用 户 要 编辑 的 页 
面 不 在 列表 中 ， 可 单 击 列表 底部 的 【打开 】 按 钮 ， 在 打开 的 对 话 框 中 导航 到 要 编辑 的 页 面 
后 再 将 其 打开 。 
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通过 【新 建 】 区 域 ， 用 户 可 以 选择 要 创建 页 面 的 类 型 或 基于 的 模板 ， 它 们 提供 了 制作 
网 页 的 起 点 ,而 每 一 个 都 有 不 同 的 页 面 布局 。 通 过 屏幕 底部 的 【快速 入 门 】”、【 新 增 功能 】 
等 链接 , 用 户 还 可 以 浏览 Dreamweaver CS4 提供 的 相关 帮助 内 容 或 主题 选中 【不 再 提示 】 
复 选 框 ， 下 次 启动 Dreamweaver CS4 时 将 不 再 出 现 “ 欢 迎 屏幕 ”。 


打开 草 近 的 项 目 新 球 主要 功 看 
疯 12125hm 区 HL 于 牛头 立夫 
富 12knal2html 季 coldFuson 的 
而 1202d42himl 上 PHP [加 
和 121241himl 人 司 4SF VBScript 下 9 和 长 强 
而 124nallhtml 条 XsLT( 才 页 

be 让 ;| 光 天 休 白 
侧 RJunttledrmml 罚 css 
DO 12stathm 生 Javasoipt 到 Web 槐 件 
而 12522hm 罚 而 L 可 

JazvaScnpt 

而 1astatniml 击 Dreamiweaver 直 所 [el es 
芒 打开 站 SS. 已 ws.. 
站 长 呈 和 me Rdsbo® Mranmwoavor® C54 
站 Wmas » pw 查找 报 新 的 功能 操 示 ， 匠 笠 委 更名 内 村- 
站 交 刘 > 
枉 Dreamweaver Ercanoe > 
UT 


图 1-4 “欢迎 屏幕 ” 
在 “欢迎 屏幕 ”的 【新 建 】 区 域 单 击 CHTML】, 打开 一 个 新 的 空白 页 面 , 进入 Dreamweaver 
CS4 的 工作 界面 ， 如 图 1-5 所 示 。 
【文档 ] 工具 栏 面板 ”面板 组 
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图 1-5 Dreamweaver CS4 的 工作 界面 


1.2.1 文档 窗口 


【文档 】 窗 口 是 利 用 Dreamweaver 进行 网 页 制作 的 主要 区 域 ， 分 为 3 个 部 分 : 最 上 边 
是 【文档 】 工 具 栏 ， 包 含 了 切换 视图 按钮 和 各 种 查看 选项 ， 中 间 是 显示 窗口 ， 用 于 显示 当 
前 文档 操作 效果 ， 有 【代码 】 视 图 、【 设 计 】 视 图 和 【 拆 分 】 视 图 3 种 方式 ， 最 下 边 是 状 
态 栏 ， 用 于 显示 环绕 当前 选 定 内 容 的 标签 的 层次 结构 ， 并 提供 与 正文 编辑 有 关 的 信息 ， 如 
窗口 大 小 、 文 档 大 小 、 估 计 下 载 时 间 等 。 
? 【代码 】 视 图 : 在 该 视图 下 , 文档 以 HTML 语言 的 形式 显示 。 可 以 手工 编写 HTML、 
JavaScript 代码 ， 以 及 服务 器 语言 代码 ASP、JSP、PHP 等 ， 对 文档 进行 精确 控制 。 
? 【设计 】 视 图 : 在 该 视图 下 , 文档 以 完全 可 视 化 的 形式 显示 。 这 是 一 个 用 于 可 视 化 
页 面 布局 、 可 视 化 编辑 和 快速 应 用 程序 开发 的 设计 环境 , 文档 显示 效果 与 在 浏览 器 
中 观看 网 页 时 效果 相似 。 
? 【 拆 分 】 视 图 : 兼 具 【 代 码 】 视 图 和 【设计 】 视 图 的 优点 ， 既 可 以 手工 编辑 代码 ， 
也 可 以 可 视 化 编辑 文档 ， 方 便 同时 操作 。 
这 3 个 视图 是 紧密 相连 的 ， 在 【设计 】 视 图 中 ， 只 要 页 面 发 生 了 变化 ， 其 结果 就 会 立 
刻 显示 在 【代码 】 视 图 中 ， 反 之 亦 然 。 在 【设计 】 视 图 中 打开 图 1-6 上 方 所 示 的 页 面 文档 ， 
用 鼠标 选中 “下 载 页 面 ”文字 。 在 【文档 】 工 具 栏 单 击 【代码 】 视 图 按钮 | 六 僻 |， 可 以 发 
现 相 应 的 源 代码 会 被 选中 ， 加 国定 力 所 A 按 下 Delete 键 ， 在 【代码 】 视 图 中 删除 选 
中 的 文字 ， 返 回 到 【 设 ? 


1 | &nb: 
#660000” TR dio nt > /BA 
‘Anbsp; | &nbsp:&nbsp 


1-6 【设计 】 视 图 与 【代码 】 视 图 


在 【文档 】 工 具 栏 单 击 【 拆 分 】 视 图 按钮 于 拆 分 ， 可 同时 显示 页 面 和 源 代码 。 将 光标 
定位 在 源 代 码 和 显示 文档 之 间 的 框 上 ， 当 光标 显示 为 水 平 的 上 下 箭头 时 拖 动 ， 可 调整 两 个 
视图 的 大 小 ， 如 图 1-7 所 示 。 在 任何 一 个 视图 中 所 作 的 修改 ， 都 将 立刻 反映 到 另 一 个 视 
图 中 。 
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图 1-7 在 【 拆 分 】 视 图 中 同时 编辑 源 代码 和 页 面 


将 光标 定位 到 页 面 中 的 文字 “编译 ”， 标 签 选择 器 显示 出 最 靠近 当前 光标 所 在 位 置 的 
一 系列 标签 ， 这 里 显示 为 <a>。 单 击 左 侧 标签 <div>， 可 以 发 现 扩 展 了 选择 ， 如 图 1-8 所 示 。 
标签 选择 器 可 用 于 准确 地 选择 要 修改 的 部 分 和 清晰 地 显示 HIML 的 结构 。 虽 然 标 签 选择 器 
对 于 选择 特定 代码 区 域 相 当 重 要 ， 但 状态 栏 用 一 个 更 加 视觉 化 的 方法 提供 了 另 一 个 特性 ， 
即 缩放 工具 ， 以 方便 用 户 对 页 面 的 某 个 局 部 进行 细致 观察 和 修改 。 

单 击 状态 栏 上 的 【缩放 工具 】 按 钮 芭 j)， 在 【设计 】 视 图 中 要 放大 的 区 域 单 击 ， 可 使 该 
部 分 放大 显示 ， 每 单 击 一 次 ， 页 面 放 大 一 次 ， 放 大 比率 按照 【设置 缩放 比率 】 列 表 中 的 设 
本 按 住 Alt 甸 并 单 击 风 标 ， 可 缩小 页 面 显示 。 


图 1-8 使 用 标签 选择 器 


1.2.2 面板 和 面板 组 


在 Dreamweaver 中 ,面板 可 以 用 来 选择 特定 部 分 的 网 页 或 站 点 元 素 ， 如 CSS 样式 或 服 
务 器 代码 。 相关 的 面板 排列 在 面板 组 中 , 用 户 可 以 根据 需要 在 页 面 上 重新 配置 或 定位 面板 。 
面板 组 默认 停靠 在 Dreamweaver 工作 区 域 的 右 侧 ， 如 果 面 板 组 没有 显示 出 来 ， 用 户 可 通过 

【窗口 】 菜 单 下 的 命令 来 显示 。 

单 击 面板 组 的 名 称 ， 可 以 打开 该 面板 组 ， 单 击 面板 组 顶部 的 面板 名 称 ， 可 在 不 同 面板 
间 切 换 ， 如 图 1-9 所 示 。 再 次 单 击 面板 组 的 名 称 ， 可 将 面板 组 折 垒 起来。 如果 用 户 打 开 了 
多 个 面板 组 ， 可 对 单个 面板 组 的 高 度 进行 调整 。 只 需 将 光标 定位 到 要 调整 面板 组 的 底部 ， 
当 出 现 上 下 方向 箭头 时 拖 动 即 可 ， 如 图 1-10 所 示 。 
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图 1-9 打开 面板 组 和 面板 1-10 调整 面板 组 的 高 度 


尽管 面板 组 是 根据 主题 组 织 安排 的 ， 但 默认 的 分 组 可 能 与 用 户 的 工作 流程 并 不 匹配 。 
根据 需要 , 您 可 以 对 Dreamweaver 的 面板 进行 重组 或 最 大 程度 的 拆 分 。 例如, 分 别 选择 【 窗 
口 】| 人 框架 】 和 【历史 记录 】 命 令 ， 打 开 这 两 个 面板 组 ， 这 两 个 面板 组 都 只 各 自 包含 一 个 
面板 ， 您 可 以 将 它们 合并 。 将 鼠标 移 到 面板 名 称 上 ， 单 击 将 其 拖 动 到 另 一 个 面板 上 ， 当 另 
一 个 面板 的 边框 显示 为 蓝 色 时 ， 即 可 将 这 两 个 面板 合并 ， 如 图 1-11 左 图 所 示 , 合并 后 的 面 
板 组 如 图 1-11 右 图 所 示 。 
[5 
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1-11 重新 组 合 面板 


除了 可 以 改变 面板 的 组 合 以 外 ， 您 还 可 以 解除 组 合 ， 将 面板 单独 放置 到 工作 界面 中 ， 
但 我 们 还 是 建议 用 户 将 面板 放置 在 面板 组 中 。 

在 进行 网 页 制作 时 ， 为 了 最 大 化 文档 窗口 ， 也 可 以 将 面板 组 隐藏 起 来 。 单 击 面板 组 左 
侧 的 【 折 又 为 图 标 】 按 钮 国 ， 即 可 将 所 有 面板 组 隐藏 为 图 标 。 再 次 单 击 该 按钮 ， 可 显示 隐 
藏 的 面板 组 。 


| 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 
1.2.3 ”属性 检查 器 


利用 属性 检查 器 ， 用 户 可 以 检查 并 编辑 页 面 上 网 页 元 素 的 属性 。 尽 管 从 本 质 上 讲 ， 属 
性 检查 器 也 是 一 个 面板 ， 但 它 在 网 页 制作 中 具有 极 大 的 灵活 性 ， 其 选项 会 依据 用 户 当 前 的 
选择 而 变化 。 例 如 ， 当 用 户 当 前 针对 文本 进行 操作 时 ， 属 性 检查 器 会 显示 一 系列 针对 文本 
的 工具 ， 用 于 设置 不 同 的 格式 ， 如 图 1-12 所 示 。 


[<Yiom| 档 式 各 无 ~ 类 | 无 =| BI 二 入 兴业 标本 人 
b's | DD | MO = 
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图 1-12 属性 检查 器 
提示 : 如 果 用 户 的 工作 界面 中 没有 显示 属性 检查 器 ， 可 选择 【窗口 】|【 属 性 】 命 令 。 
1.2.4 工具 栏 


Dreamweaver 的 工具 栏 提供 了 制作 网 页 所 需 的 许多 常用 功能 : 编辑 页 面 代码 ， 如 折 鳄 或 
展开 某 段 代码 ， 添 加 代码 注释 等 ， 执 行 操作 ， 如 获取 文件 ， 切 换 模式 ， 如 将 【设计 】 视 图 切 
换 为 【代码 】 视 图 。Dreamweaver 有 4 个 单独 的 工具 栏 ， 用 户 可 以 通过 【查看 】| 【工具 栏 】 
下 的 命令 将 它们 打开 。 

? 编码 : 包含 可 用 于 执行 多 种 标准 编码 操作 的 按钮 , 例如 折 县 和 展开 所 选 代码 、 高 亮 

显示 无 效 代码 、 应 用 和 删除 注释 、 缩 进 代 码 等 等 。 编 码 工具 栏 仅 在 【代码 】 视 图 下 
可 见 ， 且 垂直 显示 在 【文档 】 窗 口 的 左 侧 。 
? 文档 : 包含 了 一 些 对 页 面 进行 常用 操作 的 功能 按钮 , 用 户 单 击 这 些 按钮 可 以 在 文档 
的 不 同 视图 模式 间 进 行 切换 ， 如 图 1-13 所 示 。 
Te Ee 骏 服 C 且 多 @ | pr FR 
图 1-13 文档 工具 栏 


? 标准 : 提供 传统 的 文件 操作 ， 如 打开 、 保 存 、 撤 销 、 剪 切 /复制 /粘贴 等 ， 以 及 
Dreamweaver 的 一 些 独 有 特性 ， 如 打印 代码 、 在 Adobe Bridge 中 浏览 等 ， 如 图 1-14 


所 示 。 
? 样式 呈现 : 控制 【文档 】 窗 口中 呈现 出 来 的 CSS 媒体 类 型 ， 如 图 1-15 所 示 。 
泊 | 交 区 臣 凡 虽 | 关 昌 钨 | nn | [lae 


图 1-14 标准 工具 栏 图 1-15 样式 呈现 


提示 : Adobe Bridge 是 一 个 独立 的 图 像 浏览 软件 ,用户 可 以 通过 它 对 计算 机 中 的 图 像 
文件 进行 浏览 和 管理 。 


1.2.5 个 性 化 首选 参数 
通过 设置 Dreamweaver 的 首选 参数 ， 用 户 可 以 完全 控制 网 页 的 制作 过 程 。 


la 
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例 1-1 设置 Dreamweaver 的 首选 参数 。 
入 选择 【编辑 】|【 首 选 参数 】 命 令 ， 打 开 【 首 选 参数 】 对 话 框 。 系 统 默 认 打 开 的 是 
【和 常规】 选项 页 ， 如 果 没 有 显示 ， 请 在 【分 类 】 列 表 中 单 击 【常规 】 选 项 。 

加 选中 【启动 时 重新 打开 文档 】 复 选 框 ， 如 图 1-16 所 示 。 这 样 Dreamweaver 在 下 次 
启动 时 会 自动 重新 打开 上 次 结束 操作 时 未 能 关闭 的 文件 。 

各 在 【历史 步 又 最 多 次 数 】 文 本 框 中 将 “50” 修 改 成 “100”。 除 了 利用 光标 移动 和 
选择 外 ，Dreamweaver 会 把 用 户 的 每 个 动作 都 视 为 一 个 历史 步 又 。 可 用 历史 步 又 越 多 ， 可 
撤销 的 动作 也 就 越 多 。 

人 @ 在 【分 类 】 列 表 中 单 击 【复制 /粘贴 】 选 项 ， 然 后 选中 【 带 结构 的 文本 以 及 全 部 格 
式 】 单 选 按钮 ， 如 图 1-17 所 示 。 这 样 ， 从 诸如 Word 等 其 他 应 用 程序 复制 过 来 的 素材 ， 将 
在 Dreamweaver 中 保留 最 高 的 保 真 度 。 
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图 1-16 设置 启动 时 重新 打开 未 关闭 文件 1-17 最 大 程度 保留 复制 过 来 的 原始 格式 


人 @ 在 【分 类 】 列 表 中 单 击 【不 可 见 元 素 】 选 项 ， 然 后 选中 【注释 】 和 【换行 符 】 复 选 
框 ， 如 图 1-18 所 示 。Dreamweaver 使 用 名 为 “不 可 见 元 素 ” 的 一 系列 图 标 ， 用 于 表明 那些 
通常 无 法 显示 在 浏览 器 中 的 网 页 标记 。 如 果 标 记 出 现在 页 面 上 , 图 1-18 中 【显示 】 区 域 中 
的 设置 就 决定 了 该 图 标 是 否 可 以 显示 在 【文档 】 窗 口中 。 


1-18 设置 不 可 见 元 素 


@@ 单 击 对 话 框 底部 的 【确定 】 按 钮 ， 用 户 设置 的 首选 参数 都 会 马上 生效 ， 而 无 须 重启 


Dreamweaver CS4。 
1.2.6 保存 工作 区 


理想 的 工作 环境 设置 完 后 ， 用 户 便 可 以 将 自己 的 设置 保存 起 来 ， 以 便 随时 调用 它 。 选 
择 【 窗 口 】|【 工 作 区 布局 】|【 新 建 工作 区 】 命 令 ， 可 命名 当前 的 工作 区 并 保存 ， 如 图 1-19 
所 示 。 

如 果 用 户 希 望 恢复 Dreamweaver 默认 的 工作 环境 ， 选择 【窗口 】|【 工 作 区 布局 】|【 设 
计 器 】 命 令 即 可 ， 如 图 1-20 所 示 。Dreamweaver 还 提供 了 另外 7 种 工作 区 布局 ， 它 们 是 专 
门 针对 不 同 Dreamweaver 用 户 设 计 的 。 如 果 用 户 想 调用 自己 保存 的 工作 区 ， 选 择 【 窗 口 】 
I【 工 作 区 布局 】 下 的 工作 区 名 称 即 可 。 
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[ 工作 区 布局 四 ee | Y mySpace 
NR 应 用 程序 开发 人 员 
层 委 (C) 应 用 程序 开发 人 员 ( 高 级 ) 
水 平平 鳃 包 ) 经 典 
重 直 平 铺 @) 编码 器 
v 1 Untitled-1 i ] 
设计 人 员 ( 紧 污 ) 
观 重 屏 和 起 
5 重 置 myspace’ @@) 
新 建 工 作 区 QD... 
[| 管理 工作 区 0) 
1-19 命名 并 保存 工作 区 1-20 恢复 默认 的 工作 区 


1.3 ”快速 制作 一 个 简单 的 网 页 


本 节 将 通过 创建 一 个 介绍 西藏 风景 的 网 页 (效果 如 图 1-21 所 示 )， 使 读者 快速 熟悉 使 用 
Dreamweaver CS4 制作 网 页 的 流程 ， 并 掌握 网 页 文档 和 使 用 CSS 的 基本 操作 。 
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图 1-21 制作 的 网 页 效果 


1.3.1 新建 网 页 文档 


启动 Dreamweaver CS4， 选 择 【 文 件 】|【 新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 ， 如 
图 1-22 所 示 。Dreamweaver CS4 提供 了 32 种 不 同 的 起 点 文件 ， 每 一 种 都 提供 不 同 的 页 面 
布局 ， 用 户 可 以 在 此 基础 上 进行 修改 以 满足 制作 需求 。 当 然 ， 您 也 可 以 从 一 个 空白 页 面 开 
始 制作 。 
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1-22 【新 建文 档 】 对 话 框 


在 【页 面 类 型 】 列 表 中 选择 【HTML】， 在 【布局 】 列 表 中 选择 【1 列 固定 ， 居 中 ， 
标题 和 脚注 】。 这 种 布局 将 使 用 一 个 挂 锁 符号 来 表明 宽度 是 固定 的 ， 其 他 布局 的 宽度 允许 
随 浏览 器 的 窗口 宽度 扩展 或 收缩 。 

预 设 的 CSS 布局 提供 了 以 下 类 型 的 列 : 

? 固定: 列 宽 是 以 像素 指定 的 。 列 的 大 小 不 会 根据 浏览 器 的 大 小 或 站 点 访问 者 的 文本 

设置 来 调整 。 

? 弹性 : 列 宽 是 以 相对 于 文本 大 小 的 度量 单位 指定 的 。 如 果 站 点 访问 者 更 改 了 文本 设 
置 (很 多 浏览 器 都 支持 文本 缩放 功能 , 以 方便 浏览 器 阅读 网 页 , 如 Internet Explorer)， 
该 设计 将 会 进行 调整 ， 但 不 会 基于 浏览 器 窗口 的 大 小 来 更 改 列 宽度 。 

? 液态: 列 宽 是 以 站 点 访问 者 的 浏览 宽度 的 百分比 形式 指定 的 。 如 果 站 点 访问 者 将 浏 
览 器 变 宽 或 变 窄 , 该 设计 会 进行 调整 , 但 不 会 基于 站 点 访问 者 的 文本 设置 来 更 改 列 
宽度 。 

? 混合 : 使 用 固定 、 弹 性 、 液 态 三 者 的 任意 组 合 来 指定 列 类 型 。 例 如 ， 两 列 混合 , 一 
侧 是 具有 可 缩放 至 浏览 器 大 小 的 液态 主 列 , 而 另 一 侧 则 是 可 缩放 至 站 点 访问 者 的 文 
本 设置 大 小 的 弹性 列 。 

Dreamweaver CS4 提供 了 3 个 创建 布局 CSS 的 位 置 : 

? 添加 到 文档 头 : 将 布局 的 CSS 添加 到 要 创建 的 页 面 中 ，CSS 代码 显示 在 当前 网 
页 中 。 

? 新 建文 件 : 将 CSS 布局 保存 为 CSS 格式 的 独立 文件 ,然后 创建 具有 该 CSS 布局 的 
网 页 。 

? 链接 到 现 有 文件 :通过 指定 已 包含 布局 所 需 CSS 规则 的 现 有 CSS 文件 来 创建 网 页 。 
使 用 该 方式 ， 用 户 需 要 附加 外 部 CSS 文件 。 
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这 里 使 用 系统 默认 的 【文档 类 型 】 和 【布局 CSS 位 置 】， 单 击 【 创 建 】 按 钮 ， 新 页 面 
将 显示 在 【文档 】 窗 口中 ， 如 图 1-23 所 示 。 

提示 : 如 果 用 户 的 【文档 】 窗 口 显示 的 是 【代码 】 视 图 或 【 拆 分 】 视 图 ， 请 在 【文档 
工具 栏 单 击 【显示 设计 视图 】 按 钮 ， 切 换 到 如 图 1-23 所 示 的 【设计 】 视 图 。 
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1-23 ”新 创建 的 网 页 


1.3.2 ”修改 网 页 标题 


网 页 标题 显示 在 浏览 器 的 标题 栏 中 ， 它 是 诸如 Google、Baidu 等 搜索 引擎 索引 网 站 的 
关键 元 素 之 一 。 因 此 ， 将 网 页 标题 设置 为 与 网 页 内 容 相 关 的 关键 字 ， 可 以 极 大 提高 访客 搜 
索 到 该 网 页 从 而 浏览 的 几率 。 

对 于 新 建 的 网 页 文档 ，Dreamweaver 默认 的 标题 是 “无 标题 文档 ”。 要 修改 网 页 标题 ， 
可 在 【文档 】 工 具 栏 的 【标题 】 文 本 框 中 删除 原 有 文字 ， 然 后 重新 输入 新 的 网 页 标题 ， 最 
后 按 Enter 键 即 可 ， 如 图 1-24 所 示 。 
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图 1-24 修改 网 页 标题 


1.3.3 设置 网 页 背景 颜色 


用 户 可 以 为 网 页 设置 背景 颜色 或 图 像 ， 网 页 的 背景 颜色 或 图 像 应 与 网 页 的 整体 颜色 相 
协调 ， 以 突出 网 页 所 要 表达 的 主题 。 
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“第 l 章 导 论 ， 


要 设置 网 页 的 背景 颜色 ， 可 在 工作 界面 右 侧 展开 【CSS 样式 】 面 板 所 在 的 面板 组 ， 打 
开 【CSS 样式 】 面 板 。 单 击 【 全 部 】 按 钮 以 显示 页 面 中 使 用 的 所 有 CSS 规则 ， 在 规则 列表 
中 单 击 【body】 样 式 ， 下 方 将 显示 该 样式 的 所 有 属性 ， 如 图 1-25 左 图 所 示 。 

在 属性 列表 中 单 击 [background]】 属 性 , 可 在 右 侧 设置 背景 颜色 , 这 里 设置 为 “#666666”。 
按 Enter 键 确认 ， 此 时 最 大 化 【文档 】 窗 口 可 查看 页 面 背景 效果 ， 如 图 1-25 右 图 所 示 。 
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图 1-25 设置 页 面 背景 颜色 


提示 : 如 果 要 将 图 像 作为 页 面 的 背景 ,可 在 【body】 样 式 的 属性 列表 中 单 击 【 添 加 属 
性 】 链 接 ， 再 从 属性 列表 中 单 击 【background-image】 选 项 ， 然 后 单 击 右 侧 的 【浏览 】 按 


钮 王 ， 打 开 【 选 择 图 像 源 文件 】〗 对 话 框 ， 导 航 到 要 使 用 的 图 像 文件 ， 单 击 【 确 定 】 按 钮 即 
可 ， 如 图 1-26 所 示 。 
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图 1-26 指定 页 面 背 景 图 像 
1.3.4 插入 Flash 动画 


在 【文档 】 窗 口中 将 光标 置 于 文本 占 位 符 “ 标 题 ” 中 ， 在 标签 选择 器 中 单 击 <h1> 标 签 
将 标签 及 其 内 容 选 中 ， 然 后 按 Delete 键 将 其 删除 。 在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 
【媒体 】 按 钮 右 侧 小 三 角 按钮 忽 ~“， 在 下 拉 按 钮 列表 中 单 击 【SWF]】 按钮 ， 打 开 【 选 择 文 


417| 
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件 】 对 话 框 ， 导 航 到 要 插入 的 Flash 文件 ， 单 击 【确定 】 按 钮 ， 如 图 1-27 左 图 所 示 。 

将 Flash 文件 插入 到 页 面 中 后 ， 用 户 需 要 调整 网 页 的 CSS 布局 ， 以 使 Flash 动画 能 充 
分 填充 插入 的 区 域 。 选 中 插入 到 网 页 中 的 Flash 元 素 , 在 属性 检查 器 中 可 以 查看 Flash 的 大 
小 、 高 度 和 宽度 ， 以 及 播放 属性 、 比 例 等 。 

打开 【CSS 样式 】 面 板 ， 在 【样式 】 列 表 中 选中 【.oneColFixCtrHdr #conainer】 样 式 ， 
在 其 属性 列表 中 将 【width】 属 性 设置 为 与 Flash 文件 的 宽度 一 致 。 选 中 【.oneColFixCtrHdr 
#header】 样 式 ， 在 其 属性 列表 中 将 【padding】( 填 充 属性 ) 设 置 为 0。 此 时 ，【 文 档 】 窗 口 
中 的 效果 如 图 1-27 右 图 所 示 。 
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图 1-27 在 页 面 中 插入 Flash 动 面 


1.3.5 ”插入 文本 


首先 来 输入 标题 , 将 光标 置 于 文本 标题 “主要 内 容 ” 前 , 拖 动 鼠 标 将 其 选中 并 按 Delete 
键 将 其 删除 。 注 意 ， 此 时 仅仅 是 删除 了 文本 标题 的 内 容 ， 而 没有 删除 文本 标题 占 位 符 ， 因 
而 可 发 现 标签 选择 器 中 的 <h1> 标 签 依然 存在 。 输 入 标题 内 容 “ 布 达 拉 宫 ”。 

用 同样 的 方法 选中 文本 标题 下 的 文字 ， 将 其 删除 ， 并 输入 图 1-28 所 示 的 内 容 ， 最 后 将 
“H2 级 别 的 标题 ”以 及 该 标题 下 的 文本 内 容 删除 。 


布 达 拉 宫 


踏足 雪 域 大 地 ,没有 大 不 登 布 达 拉 宫 的 。 它 是 拉萨 这 座 雪 域 之 都 乃至 整个 青藏 高 原 的 象征 ， 不 仅 闻名 全 
国 更 闻名 于 世界 。 这 座 古 代 建 筑 艺术 之 杰作 ， 这 座 以 极 高 的 历史 价值 和 旷世 之 宝 闻名 于 世 的 宫殿 ， 詹 
高 贵 威严 的 秦 姿 屹立 在 拉萨 城内 的 红 山 之 上 。 仁 立 布 达 拉 宫 广场 和 翘首 仰望 ， 只 见 暴 宇 疾 峨 、 金 项 入 云 ， 
曲 径 回廊 重重 登 琶 。 那 拔 地 苇 空 的 气势 ， 那 金碧辉煌 的 色调 真如 天 上 宫 浆 一 般 吕 

《市 达 拉 "， 是 薇 语 音译 ， 又 译作 "普陀 罗 或 普陀"， 原 指 观世音 车 萨 所 居 之 鸟 ， 所 以 布 达 拉 宫 又 被 称 
EF 从 机 从 于 到 十 四 车 过 和 的 1300 多 年 人 施政 


五 世 达 袁 电 就 成 为 历 世 达 称 量 时 的 冬 宫 ， 也 是 西藏 地 方 统治 者 政教 公 一 
ee 重大 的 宗教 、 政 治 仪式 均 在 此 举行 ， 供 替 历 世 这 加 呈 的 灵 塔 也 在 此 处 。 富 中 保存 着 明 
代 旦 市 封 旭 西 巷 官 员 的 对 诸 、 印 些 金 册 、 玉 出 和 工艺 品 、 经 文 、 攻 学、 历史、 文学 书籍 以 及 各 类 佛像 
由 
布 拉 达 富 的 生体 由 红 写 和 白宫 组 成 ， 光 看 颜色 就 可 以 很 明显 地 区 分 出 来 。 红 定居 中 ， 墙 上 都 刷 红 寺 
白宫 横贯 两 器; 和 培 上 刷白 多 定 体 主 核 外 观 13 层 ， 内 为 9 忆 ， 意 约 117 玉 ; 
东 夯 长 360 多 米 ， 再 270 米 ， 建 和 327 玫 类 由 要 富 、 佛 康 、 训 说 入 0008 旨 


, 下 ， 烟 烟 生 辉 品 
历经 二 年 历史 风 南 和 和 也 是 西藏 艺术 精品 和 珍贵 
文物 的 宝库 ， 它 是 西藏 历史 和 文化 的 象征 ， 也 是 人 类 文明 史上 重要 遗产 吕 


图 1-28 插入 文本 
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将 光标 置 于 页 面 底部 的 “脚注 ”文本 占 位 符 ， 双 击 将 其 选中 ， 然 后 按 Delete 键 将 其 删 
除 。 输 入 版 权 信 息 ， 如 图 1-29 所 示 。 
Copyright© 2008 By Choice Lee AI Rights Reserved 
本 用 二 
图 1-29 在 脚注 区 域 添加 版 权 信息 


1.3.6 ”插入 图 像 


将 光标 置 于 内 容 段 落 中 的 第 2 行 。 在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 【 图 像 】 按 
钮 右 侧 小 三 角 按 钮 图 :， 在 下 拉 按钮 列表 中 单 击 【 图 像 】 按 钮 ， 打 开 【 选 择 图 像 源 文 件 】 
对 话 框 。 选 中 要 插入 到 页 面 中 的 图 像 ， 单 击 【和 确定】 按钮 。 

选中 图 像 ， 将 图 像 缩放 到 合适 的 大 小 ， 如 图 1-30 所 示 。 在 属性 检查 器 的 【对 齐 】 选 项 
列表 中 选择 【 右 对 齐 】， 人 各 图 1-31 所 看 


- 
将 全 由 ， 玉 形 和 工艺 只 


图 1-30 调整 图 像 大 小 1-31 将 图 像 右 对 齐 至 文本 


1.3.7 插入 图 形 背 景 


可 以 为 不 同 的 页 面 区 域 指定 不 同 的 图 形 背景 ， 将 光标 置 于 页 面 的 版 权 信息 部 分 。 打 开 
【CSS 样式 】 面 板 ， 在 【样式 】 列 表 中 选中 样式 【.oneColFixCtrHdr #footer】》， 在 其 属性 
列表 中 向 其 添加 【background-image】 属 性 ， 并 指定 该 区 域 要 使 用 的 背景 图 形 ， 添 加 的 图 
形 和 得 到 的 效果 如 图 1-32 所 示 。 

IE Rh Reserved 
图 1-32 为 footer 区 域 添加 背景 图 形 


1.3.8 调整 文本 字体 和 颜色 


使 用 CSS 可 以 改变 一 个 页 面 上 或 整个 站 点 中 所 有 标签 的 所 有 实例 的 外 观 ， 除 此 之 外 ， 
用 户 还 可 以 针对 一 个 特定 的 页 面 元 素来 设置 其 CSS 样式 。 例如 要 修改 文本 标题 的 字体 和 颜 
色 ， 以 使 其 更 为 美观 。 可 首先 将 光标 置 于 “ 布 达 拉 宫 ” 文 本 标题 处 ， 然 后 打开 【CSS 样式 】 
面板 。 单 击 属性 列表 右 下 角 的 【新 建 CSS 规则 】 按 钮 在， 打开 【新 建 CSS 规则 】 对 话 框 ， 
如 图 1-33 所 示 。 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


采用 默认 的 设置 ， 单 击 【 确 定 】 按 钮 ， 打 开 【CSS 规则 定义 】 对 话 框 。 在 【分 类 】 列 
表 中 选择 【类 型 】 选 项 ， 然 后 在 右 侧 参 数 中 设置 字体 (Font-family)、 大 小 (Font-size) 以 及 字 
体 颜 色 (Color) 等 ， 如 图 1-34 所 示 。 完 成 后 单 击 【 确 定 】 按 钮 ， 该 样式 即 被 应 用 到 标题 文 
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1-33 【新 建 CSS 规则 】 对 话 框 图 1-34 ”为 标题 文本 创建 CSS 样式 


下 面 来 为 正文 内 容 设置 格式 。 在 【CSS 样式 】 面 板 的 【样式 】 列 表 中 选中 【body】 样 
式 ， 然 后 单 击 属性 列表 右 下 角 的 【编辑 CSS 规则 】 按 钮 | 辆 ， 打 开 【CSS 规则 定义 】 对 话 
框 ， 在 其 中 重新 定义 正文 要 使 用 的 字体 格式 和 颜色 即 可 。 用 同样 的 方法 设置 footer 区 域 版 
权 信息 的 文本 字体 和 颜色 。 


1.3.9 保存 并 预览 网 页 


要 保存 网 页 文档 ， 可 选择 【文件 】|【 保 存 】 命 令 ， 或 使 用 组 合 键 CtrlH+S， 将 打开 【 另 
存 为 】 对 话 框 ， 输 入 文件 名 ， 并 选择 文件 的 保存 类 型 (这 里 选择 【HTML 文档 】 类 型 )。 文 
件 的 保存 类 型 由 用 户 创建 的 网 页 文档 类 型 而 定 , 可 以 是 HTML 文档 ， 也 可 以 是 ASP、JSP、 
XML 文档 ， 还 可 以 是 库 文件 、 模 板 文 件 等 。 

为 了 检测 网 页 的 兼容 性 ， 用 户 可 在 多 个 浏览 器 中 预览 自己 制作 好 的 网 页 ， 但 需要 指定 
默认 的 主 浏览 器 。 选 择 【 文 件 】 民 在 浏览 器 中 预览 】 上 编辑 浏览 器 列表 】 命 令 ， 打 开 【 首 
选 参数 】 对 话 框 。 单 击 加 号 按钮 ， 可 在 浏览 器 列表 中 添加 本 地 安装 的 其 他 浏览 器 。 在 浏览 
器 列表 中 选中 要 作为 主 浏览 器 的 浏览 器 名 称 ， 选 中 【 主 浏览 器 】 复 选 框 即 可 ， 如 图 1-35 所 
示 。 最 后 单 击 【确定 】 按 钮 完成 设置 。 

返回 Dreamweaver， 按 F12 键 即 可 在 设置 的 主 浏览 器 中 预览 网 页 的 效果 ， 如 前 面 的 图 
1-21 所 示 。 如 果 您 想 在 其 他 浏览 器 中 预览 ， 可 单 击 【文档 】 工 具 栏 的 【在 浏览 器 中 预览 / 
调试 】 右 侧 小 三 角 按钮 ， 从 下 拉 选 项 中 选择 要 使 用 的 浏览 器 ， 如 图 1-36 所 示 。 


到 同 主 竟 中 
交流 


各 图 | Cc 加 @ | wr 纪 65m 
WEE Eplere 


EE Masthon em Fi2 
站 2 EDevico central 。 col 人 +Fl2 
0 CR Lm Sy 
图 1-35 设置 要 使 用 的 主 浏览 器 图 1-36 使 用 其 他 浏览 器 预览 网 页 


本 章 小 结 


通过 对 本 章 的 学 习 , 读者 应 对 网 页 的 基础 知识 有 所 了 解 , 并 能 自 定义 Dreamweaver CS4 
的 工作 界面 ， 使 之 更 符合 自己 的 网 页 制作 习惯 。 通 过 章 末 的 具体 实例 ， 读 者 应 掌握 使 用 
Dreamweaver CS4 制作 网 页 的 一 般 流程 (从 创建 到 最 后 的 效果 预览 )， 以 及 网 页 文档 的 基本 
操作 ， 并 对 CSS 如 何 控制 页 面 元 素 效果 有 所 了 解 。 


习 题 


填空 题 
1. 网 页 又 称 ， 是 一 个 纯 文本 文件 ， 它 以 超 文本 和 为 技术 ,采用 HTML、CSS、XML 等 
语言 来 描述 组 成 页 面 的 各 种 元 素 ， 包 括 文字 、 图 像 、 音 乐 等 ， 并 通过 客户 端 浏览 器 进行 解析 ， 从 而 向 
浏览 者 呈现 各 种 信息 。 
无 论 是 ASP、JSP， 还 是 PHP， 它 们 都 基于 标签 ， 是 对 标签 的 扩展 。 
用 户 通过 来 访问 网 页 。 
和 是 网 页 中 最 基本 的 元 素 ， 是 网 页 最 主要 的 信息 载体 。 
网 站 的 是 网 站 特色 和 内 容 的 集中 体现 ， 一 般 简 称 为 站 标 ， 放 置 在 主页 和 链接 页 面 上 。 
在 Dreamweaver 中 ， 可 以 用 来 选择 特定 部 分 的 网 页 或 站 点 元 素 ， 如 CSS 样式 或 服务 器 代码 。 
利用 ， 用 户 可 以 检查 并 编辑 页 面 上 网 页 元 素 的 属性 。 
显示 在 浏览 器 的 标题 栏 中 ， 它 是 诸如 Google、Baidu 等 搜索 引擎 索引 网 站 的 关键 元 素 之 一 。 

使 用 可 以 改变 一 个 页 面 上 或 整个 站 点 中 所 有 标签 的 所 有 实例 的 外 观 ， 除 此 之 外 ， 用 户 还 可 以 
针对 一 个 特定 的 页 面 元 素来 设置 其 CSS 样式 。 
10. 为 了 检测 网 页 的 兼容 性 ， 用 户 可 在 多 个 浏览 器 中 预览 自己 制作 好 的 网 页 ， 但 需要 指定 哪 一 个 为 默认 

的 


和 
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选择 题 
11. 在 Dreamweaver 中 ， 要 对 网 页 进行 手动 编写 代码 ， 应 在 文档 窗口 的 (  ) 视 图 下 进行 。 
A. 代码 B. 视图 C. 拆 分 
12. 要 向 页 面 中 插入 Flash 动画 ， 可 通过 ( “) 面 板 来 实现 。 
和 -文件 B. 资源 C. 插入 D. CSS 样式 
13. 当 站 点 访问 者 将 浏览 器 变 宽 或 变 窄 时 ， 如 果 希 望 页 面 进行 自动 调整 以 显示 ,但 又 希望 页 面 不 因为 站 
点 访问 者 的 文本 设置 而 更 改 列 宽度 ， 则 在 设计 网 页 的 CSS 布局 时 ， 使 用 ( ”“) 类 型 的 列 。 
A. 固定 B. 弹性 C. 液态 D. 混合 
简 答题 
14. 网 页 是 如 何 工 作 的 ， 即 它 是 如 何 呈 现在 用 户 浏览 器 上 的 ? 
15. 如 何 对 网 页 进行 构思 ? 
16. 简 述 网 页 的 设计 原则 和 一 般 流 程 。 
上 机 操作 题 
17. 利用 Dreamweaver CS4 提供 的 CSS 页 面 布 局 , 制作 一 个 简单 网 页 ， 要 包含 文本 、 图 像 等 基本 网 页 元 素 。 
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第 2 章 


使 用 文本 和 图 像 


本 章 介绍 网 页 中 文本 和 图 像 元 素 的 更 多 知识 ， 包 括 可 用 的 文本 、 图 像 类 型 ， 以 及 如 何 
设置 它们 的 格式 。 通 过 本 章 的 学 习 ， 应 该 完成 以 下 学 习 有 目标 ; 

矿 了 解 文本 插入 工具 

i 学 会 对 文本 进行 换行 和 分 段 

fy 学 会 添加 空格 、 水 平 线 、 日 期 以 及 一 些 特殊 符号 

i 学 会 创建 编号 列表 和 项 目 列表 

fy 掌握 表格 式 文本 的 添加 方法 

i 学 会 设置 文本 的 格式 

fy 了 解 网 页 中 可 用 的 图 像 类 型 

i 掌握 在 网 页 中 添加 图 像 的 各 种 方法 

i 学 会 创建 鼠标 经 过 图 像 

fy 学 会 创建 导航 条 


2.1 在 网 页 中 使 用 文本 


文本 是 网 页 用 来 传递 信息 的 最 有 效 方式 之 一 ， 也 是 网 页 中 运用 最 广泛 的 网 页 元 素 。 在 
制作 网 页 时 ， 除 了 可 以 在 页 面 中 直接 输入 文本 外 ， 用 户 还 可 以 利用 Dreamweaver CS4 的 文 
本 插入 工具 (图 2-1 所 示 )， 在 页 面 中 插入 水 平 线 、 日 期 以 及 一 些 特殊 字符 (如 版 权 符号 )。 对 
于 具有 相似 性 质 或 某 种 顺序 的 文本 ， 用 户 还 可 以 对 它们 应 用 列表 。 

粗 体 ”加 强 段落 已 编排 格式 标题 2 项 目 列表 列表 项 定义 术语 缩写 字符 


直下 一 下 [ug | dt dd|abr uc| ©- 


强调 ” 块 引用 标题 1 标题 3 编号 列表 定义 列表 定义 说 明 首 字母 缩写 词 
图 2-1 文本 插入 工具 


提示 : 在 【插入 】 面 板 的 【文本 】 类 别 下 ， 可 看 到 各 种 文本 插入 工具 。 
2.1.1 使 用 普通 文本 


在 网 页 文档 中 ， 将 光标 定位 在 需要 添加 文本 的 位 置 ， 按 Ctrl+Shift 键 切 换 到 要 使 用 的 
输入 法 ， 即 可 进行 文本 的 输入 ， 如 图 2-2 所 示 。 进 行文 本 输入 时 ，Dreamweaver 不 会 自动 
进行 换行 ， 用 户 可 使 用 Shift+Enter 键 来 手动 换行 。 如 果 要 分 段 ， 则 需要 按 Enter 键 。 换 行 
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本 而 分 段 时 ， 两 个 段落 间 的 间距 比较 大 ， 如 图 2-3 所 示 。 


图 2-2 输入 文本 图 2-3 文本 的 行 间 距 和 段 间距 


除了 直接 输入 文本 外 ， 用 户 还 可 以 向 页 面 中 复制 文本 ， 或 导入 Word、Excel 等 其 他 应 
用 程序 中 的 文本 。 以 导入 Excel 文档 为 例 ， 将 光标 置 于 页 面 中 要 导入 Excel 文本 的 位 置 ， 
选择 【文件 】|【 导 入 】|【Excel 文档 】 命 令 ， 打 开 【 导 入 Excel 文档 】 对 话 框 。 选 择 要 导 
入 的 Excel 文档 ， 单 击 【打开 】 按 钮 。 稍 等 片刻 后 ，Excel 数据 将 以 表格 形式 显示 在 页 面 中 ， 
如 图 2-4 所 示 。 


e931481 76 
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L401006000 6277100) Lz 
于 年 13651045613 #2773901 253 
DTN 天 范 和 于 91001689L W7840% Boroding dl ot 
nl ene et met One 2 | A 13501038366 加 796045 hacheshao B263act 
和 刍 区 11491386876 W2790236 hulujni DIG com 


四、 有 内 ， 司 丰 用 二 1。 有 财 = 竺 维 杰 13141201740 ET 1901 Choice103 Bbu cors 


四 2-4 ”在 页 面 中 导入 Excel 文本 


2.1.2 ”使 用 空格 、 水 平 线 、 日 期 和 特殊 符号 


1. 使 用 空格 

在 Word 等 文字 处 理 软 件 中 ， 若 要 添加 空格 ， 只 需 按 空格 键 即 可 。 而 在 Dreamweaver 
中 ， 由 于 文档 格式 都 是 以 HIML 形式 存在 的 ， 要 在 字符 之 间或 段 首 添加 空格 ， 可 按 
Shift+Ctrl+ 空 格 键 。 如 果 需 要 添加 多 个 空格 ， 重 复 该 组 合 键 即 可 。 

2. 使 用 水 平 线 

在 页 面 中 使 用 水 平 线 可 以 更 好 地 组 织 信息 。 例 如 ， 可 以 使 用 一 条 或 多 条 水 平 线 来 分 隔 
文本 或 对 象 ， 从 而 使 网 页 更 有 条 理 和 层次 感 。 要 在 页 面 中 添加 水 平 线 ， 可 首先 将 光标 定位 
到 需要 添加 水 平 线 的 位 置 ， 然 后 选择 【插入 】|【HIML]】|【 水 平 线 】 命 令 即 可 ， 如 图 2-5 
所 示 。 

选中 添加 的 水 平 线 ， 属 性 检查 器 中 将 出 现 其 设置 参数 ， 如 图 2-6 所 示 。 用 户 可 以 在 此 
设置 水 平 线 的 高 度 、 宽 度 、 对 齐 方式 以 及 是 否 启用 阴影 效果 等 。 

提示 : 用 户 可 通过 多 种 方式 来 选中 页 面 元 素 ,在 【设计 】 视 图 中 直接 单 击 该 元 素 ,， 在 
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标签 选择 器 中 单 击 该 页 面 元 素 的 标签 ， 或 在 【 拆 分 】 视 图 的 页 面 代码 中 选中 定义 该 页 面 元 
素 的 源 代码 。 


tne-peigh 


i 
和 忆 革 让 ， 它 是 春装 人 尝 于 日 


E 着 完 
音 寺 等 月 王政 太 。 它 是 盏 散人 芋 于 ; 
已 身 的 辣 押 但 要 市 本 展 姑 身材 ; 
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2-5 在 页 面 中 添加 水 平 线 


1. 文明 太 万 
， 台 小 着 芒 且 富 疗 本 国 们 测 午 接地 #0 " 


对 齐 [居中 对 齐 。 类 人 onecolFix( ~ 


回 阴影 


2-6 设置 水 平 线 属性 


3. 使 用 特殊 符号 

特殊 符号 是 指 诸如 版 权 符 号 、 货 币 符号 、 注 册 商 标 等 类 型 的 符号 。 要 在 页 面 中 使 用 特 
殊 符号 ， 可 单 击 【插入 】 面 板 【 文 本 】 类 别 下 最 下 方 按钮 旁 的 下 拉 三 角 按钮 ， 如 图 2-7 磊 
图 所 示 。Dreamweaver 将 常用 的 特殊 字符 分 成 了 4 大 类 : 标点 符号 、 货 币 符号 、 版 权 符 号 
和 其 他 字符 。 单 击 要 使 用 的 符号 ， 即 可 将 其 添加 到 页 面 中 光标 所 在 的 位 置 ， 如 图 2-7 右 图 
所 示 。 

如 果 用 户 要 使 用 的 字符 不 在 图 2-7 左 图 所 示 的 列表 中 ， 可 单 击 【 其 他 字符 】 按 钮 ， 打 
开 【 插 入 其 他 字符 】 对 话 框 ， 从 中 选择 要 使 用 的 字符 ， 如 图 2-8 所 示 。 
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2-7 在 页 面 中 添加 特殊 字符 图 2-8 【插入 其 他 字符 】 对 话 框 


注意 : 在 插入 特殊 字符 时 ， 由 于 文档 编码 方式 的 不 同 ， 可 能 会 导致 某 些 特殊 字符 不 能 
显示 。 
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4. 使 用 日 期 

在 Dreamweaver 中 ， 用 户 可 以 很 方便 地 在 页 面 中 插入 当前 日 期 。 而 且 如 果 选 择 了 自动 
更 新 ,那么 页 面 中 的 日 期 还 会 自动 进行 更 新 。 要 在 页 面 中 插入 日 期 ， 可 在 【插入 】 面 板 【 常 
用 】 类 别 下 单 击 【 日 期 】 按 钮 图， 打开 【插入 日 期 】 对 话 框 ， 如 图 2-9 左 图 所 示 。 

用 户 可 设置 星期 格式 、 日 期 格式 和 时 间 格 式 等 ， 也 可 以 不 使 用 星期 和 时 间 ， 而 只 使 用 
日 期 。 选 中 【储存 时 自动 更 新 】 复 选 框 ， 可 在 每 次 保存 页 面 时 都 更 新 该 日 期 。 单 击 【确定 】 
按钮 ， 即 可 在 页 面 中 光标 所 在 位 置 插入 该 日 期 ， 如 图 2-9 右 图 所 示 。 


区 


这 看 时 而 革 要 新 


a A Rishts Raseried 2008 和 F410 


图 2-9 在 页 面 中 添加 日 期 


2.1.3 ”使 用 并 设置 列表 属性 


Dreamweaver 完全 支持 编号 列表 和 项 目 列表 ， 列 表 常 应 用 在 条 款 或 列举 等 类 型 的 文本 
中 ， 用 列表 的 方式 可 使 内 容 更 直观 。 

1. 使 用 编号 列表 

编号 列表 前 面 通常 带 有 数字 前 导 字符 ， 可 以 是 英文 字母 、 阿 拉 伯 数 字 、 罗 马 数字 等 。 
将 光标 置 于 页 面 中 要 创建 编号 列表 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 【 编 号 
列表 】 按钮， 页 面 中 将 出 现 数字 前 导 字符 。 在 其 后 输入 文本 内 容 后 ， 按 Enter 键 将 换行 ， 
并 出 现下 一 个 数字 前 导 字符 ， 继 续 输入 其 他 列表 项 内 容 ， 直 至 完成 整个 列表 项 的 创建 ， 如 
图 2-10 所 示 。 您 也 可 以 为 已 有 的 文本 创建 编号 列表 ， 只 需 在 页 面 中 选中 这 些 文本 ,然后 单 
击 【 编 号 列表 】 按 钮 即 可 。 

2. 使 用 项 目 列表 

项 目 列表 前 面 一 般 使 用 项 目 符号 作为 前 导 字 符 ， 可 以 是 正方 形 、 圆 点 等 。 在 页 面 中 使 
用 项 目 列表 的 方法 和 编号 列表 相似 ， 不 同 的 是 ， 在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 的 
是 【项 目 列表 】 按 钮 中， 效果 如 图 2-11 所 示 。 


1. 文明 大 方 ， 
| 2 
9 全 


图 2-10 编号 列表 图 2-11 项 目 列表 


3. 使 用 媒 套 列表 
列表 是 可 以 嵌 套 的 ， 就 是 列表 中 可 以 包含 其 他 列表 。 将 光标 置 于 页 面 中 要 创建 谋 套 列 
表 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 【编号 列表 】 按 钮 ， 在 数字 前 导 字 符 后 
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输入 文本 内 容 。 按 Enter 键 进 行 换行 ， 单 击 属性 检查 器 中 的 【文本 缩 进 】 按 钮 [ 吾 |， 页 面 中 
的 效果 如 图 2-12 所 示 。 

单 击 属性 检查 器 的 【项 目 列表 】 按 钮 ， 编 号 列表 前 导 符 变 成 了 项 目 列表 前 导 符 ， 在 前 
导 符 后 输入 文本 内 容 ， 如 图 2-13 所 示 。 连 续 按 两 次 Enter 键 ， 再 次 出 现 编号 列表 前 导 符 ， 
继续 输入 编号 列表 内 容 。 结 束 输入 后 ， 按 Enter 键 ， 可 进入 项 目 列表 前 导 符 ， 输 入 项 目 列 
表 内 容 。 重 复 上 述 操作 ， 即 可 完成 嵌 套 列表 的 创建 ， 最 后 效果 如 图 2-14 所 示 。 


1 > : 
和 
做 法 。 在 正式 场合 ， 尽 穿 过 器 、 过 运 、| 


过 短 和 过 紧 的 服装 。 身体 部 位 的 过 分 如 
露 ， 不 但 有 失 自 己 身份 ,而且 也 失 敏 于 
人 使 他 人 感到 多 有 不 便 。 


村 的 和 个 和 分 相 可 梢 必 拉 


的 描 配 
Sy | 展现 着 凌 的 整体 之 美 。; 


1 3. 个 性 特征 


1 XR | ~ A 
1.| 和 的 sl dE 好 
| 各 候 直 人 时 和 有 不 代 -| te 2 
图 2-12 对 文本 进行 缩 进 图 2-13 创建 嵌 套 列表 图 2-14 赚 套 列表 效果 
4. 设置 列表 属性 


在 使 用 列表 时 ， 编 号 列表 默认 的 前 导 字 符 是 阿拉 伯 数 字 ， 项 目 列表 默认 的 则 是 圆 点 。 
用 户 可 以 对 列表 的 外 观 属 性 进行 修改 , 改变 列表 的 前 导 符 号 。 将 光标 置 于 要 修改 的 列表 中 ， 
在 属性 检查 器 中 单 击 【列表 项 目 】 按 钮 ， 可 打开 【列表 属性 】 对 话 框 ， 如 图 2-15 左 图 所 示 。 
在 【列表 类 型 】 下 拉 列 表 中 可 选择 列表 的 类 型 ， 如 编号 列表 、 项 目 列表 等 ; 在 【样式 】 
下 拉 列 表 中 选择 列表 前 导 符 号 的 样式 (不 同 的 列表 类 型 ， 其 提供 的 可 选 样式 不 同 )。 设 置 完 
成 后 单 击 【确定 】 按 钮 ， 页 面 中 的 列表 样式 将 会 自动 进行 更 新 ， 如 图 2-15 右 图 所 示 。 
。 要 求 着 装 要 符合 本 国 的 道德 传 ; 
统 和 常规 做 法 。 在 正式 场合 ，; 
下 村 本 员 [而 日 列 洒 | 的 服装 。 身体 部 位 的 过 分 暴露 ; 
wet) [EL ， 不 但 有 失 自 己 身份 ， 而且 也 ; 
- 失 敬 于 人 , 使 也 人 感到 多 有 不 : 


n 便 ; 
a 2. 搭配 得 体 | : 
要 求 着 装 的 各 个 部 分 相互 呼应 

， 精 心 搭配 ， 特 别 是 要 恪守 服 


图 2-15 更 改 项 目 列表 前 导 符 


提示 : 如 果 选 择 的 列表 类 型 是 编号 列表 ， 则 【列表 属性 】 对 话 框 中 的 【开始 计数 】 文 
本 框 可 用 ， 用 户 可 输入 编号 列表 的 起 始 编号 。 


2.1.4 使 用 表格 式 数据 


要 在 页 面 中 显示 已 经 组 织 好 的 数据 ， 表 格 是 最 有 效 的 方式 。 将 光标 定位 到 页 面 中 要 插 
入 表格 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 【表格 】 按 钮 国 ， 打 开 【 表 格 】 对 
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话 框 ， 如 图 2-16 左 图 所 示 。 输 入 要 创建 表格 的 行 数 和 列 数 ， 设 置 表格 的 宽度 、 边 框 粗细 ， 
单元 格 的 边 距 、 间 距 ， 并 设置 页 眉 的 位 置 。 用 户 还 可 以 为 创建 的 表格 设置 标题 ， 一 切 完成 
后 ， 单 击 【 确 定 】 按 钮 ， 表 格 将 以 指定 的 方式 插入 页 面 中 ， 如 图 2-16 右 图 所 示 。 
提示 : 在 设置 表格 宽度 时 ， 如 果 使 用 的 单位 是 “百分比 "， 表 格 会 按照 设置 的 百分比 来 
填充 光标 所 在 的 行 ， 如 果 使 用 的 值 是 100， 则 表格 会 进行 扩展 ， 直 至 完全 填充 光标 所 在 的 
列 。 您 也 可 以 使 用 “像素 ”作为 单位 ， 然 后 指定 表格 的 具体 宽度 。 
pm | 
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图 2-16 在 页 面 中 插入 表格 


在 表格 的 单元 格 中 输入 数据 ， 由 于 第 一 行 是 页 眉 ， 因 而 输入 的 文字 会 自动 变 成 粗 体 。 
另外 ， 在 输入 数据 时 ， 可 以 按 Tab 键 在 不 同 单元 格 间 切 换 。 按 一 次 Tab 键 ， 可 以 将 光标 右 
移 至 下 一 个 单元 格 。 如 果 光 标 已 经 在 本 行 的 最 后 一 个 单元 格 中 ， 那 么 按 Tab 键 光标 将 移 至 
下 一 行 的 第 一 个 单元 格 中 。 

如 果 需 要 修改 最 初 用 来 定义 表格 的 行 数 或 列 数 ， 可 首先 选中 它 ， 然 后 在 属性 检查 器 中 
进行 修改 即 可 ， 如 图 2-17 所 示 。 用 户 还 可 以 在 这 里 设置 表格 的 边框 宽度 、 对 齐 方式 、 背 景 
颜色 ,边框 颜色 等 , 甚至 可 以 单独 为 表格 设置 背景 图 像 。 要 删除 表格 ,只 需 选 中 它 并 按 Delete 
键 即 可 。 


| 尾 性 
表格 Ia % =] 博 充 对 齐 居中 对 齐 =] 类 C5) 无 


间距 边框 


图 2-17 设置 表格 属性 


如 果 用 户 需 要 修改 表格 中 单元 格 的 宽度 或 高 度 ， 那 么 可 将 光标 移 到 单元 格 的 边界 上 ， 
当 光 标 变 成 水 平 或 垂直 双向 箭头 时 拖 动 即 可 ， 如 图 2-18 所 示 。 须 要 注意 的 是 ， 改 变 一 个 单 
元 格 的 宽度 或 高 度 ， 意 味 着 将 改变 单元 格 所 在 行 的 宽度 或 高 度 。 

用 户 可 对 表格 中 的 单元 格 进行 合并 或 拆 分 ， 要 合并 单元 格 ， 可 首先 选中 它们 ， 然 后 单 
击 属性 检查 器 中 的 【合并 】 按 钮 回 。 要 拆 分 某 个 单元 格 ， 可 将 光标 置 于 该 单元 格 ， 单 击 属 
性 检查 器 中 的 【 拆 分 】 按 钮 四 ， 然 后 在 打开 的 对 话 框 中 设置 要 拆 分 成 的 行 数 或 列 数 即 可 ， 
如 图 2-19 所 示 。 
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图 2-18 修改 单元 格 宽度 图 2-19 设置 单元 格 要 拆 分 成 的 行 数 或 列 数 


2.1.5 设置 文本 格式 


文本 的 字体 、 大 小 、 颜 色 和 粗 斜 等 ， 是 文本 的 基本 格式 。 

1. 设置 文本 的 字体 

不 同 的 字体 ， 其 显示 外 观 是 不 同 的 。 另 外 ,不 同 的 操作 系统 中 所 包含 的 字体 可 能 不 同 ， 
Dreamweaver 的 页 面 使 用 的 都 是 HTML+CSS 的 结构 ， 浏 览 器 在 读 取 页 面 的 时 候 都 是 从 本 
地 字库 调用 。 因 而 ， 在 设计 者 计算 机 上 能 正常 显示 的 字体 并 不 意味 着 在 访客 浏览 器 上 就 一 
定 能 正确 显示 。 

为 了 使 访客 看 到 的 页 面 效果 保持 一 致 ， 网 页 中 的 文本 通常 都 采用 最 常用 的 字体 。 例 如 
中 文采 用 “宋体 ”， 英 文采 用 “Arial” 等 。 此 外 ， 网 页 制作 者 还 可 以 编辑 一 个 字体 列表 ， 
当 访客 计算 机 中 没有 第 一 种 字体 时 ， 就 按照 字体 列表 中 的 第 二 种 字体 来 显示 ， 这 样 也 可 以 
尽 可 能 地 保持 页 面 外 观 一 致 。 

将 光标 置 于 页 面 中 的 文本 处 ， 单 击 属性 检查 器 中 的 【CSS】 按 钮 [本 css ]， 在 【字体 】 
下 拉 列 表 中 的 【编辑 字体 列表 】 命 令 ， 打 开 【 编 辑 字体 列表 】 对 话 框 ， 如 图 2-20 所 示 。 在 
【可 用 字体 】 列 表 框 中 选择 需要 添加 的 字体 ， 单 击 按钮 将 其 添加 到 左 侧 【 选 择 的 字体 】 
列表 框 中 。 如 果 需 要 在 字体 列表 中 添加 多 种 字体 ， 重 复 操作 即 可 。 要 删除 字体 列表 中 的 某 
个 字体 ， 在 【选择 的 字体 】 列 表 框 中 选中 它 后 ， 单 击 按钮 区 即 可 。 


尝 态 WD 在 体 ， 新 中 伟 -二 全 
不 全 co 站 加 co | 忒 
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图 2-20 编辑 字体 列表 


编辑 完 字 体 列表 后 ， 单 击 【 确 定 】 按 钮 ， 新 的 字体 列表 将 会 出 现在 属性 检查 器 的 【 字 
体 】 下 拉 列 表 中 。 选 择 要 设置 字体 的 文本 ， 在 【字体 】 下 拉 列 表 中 选择 即 可 。 


呵 为 什么 我 的 【可 用 字体 】 列 表 框 中 没有 “中 文 仿宋 ”、“ 中 文 彩云 ”等 字体 ? 
人 久 将 C:\Windows\Fonts 下 的 字体 文件 复制 到 Dreamweaver 安装 文件 夹 下 的 JVMMib\fonts 文件 


来 下 。 为 了 保证 页 面 能 在 所 有 机 器 上 显示 正常 ， 对 于 一 些 比较 少见 的 字体 ， 建 议 用 户 慎 用 。 
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2. 设置 文本 的 大 小 

文本 的 大 小 ， 即 字号 。 在 页 面 中 选中 要 设置 大 小 的 文本 , 然后 在 属性 检查 器 的 【大 小 】 
下 拉 列 表 框 中 选择 要 使 用 的 字体 大 小 ， 并 在 其 后 的 下 拉 列 表 框 中 选择 度量 单位 ， 如 图 2-21 
所 示 。 

3. 设置 文本 的 颜色 

网 页 通常 都 采用 白 底 黑 字 ， 有 时 为 了 适应 网 页 的 风格 ， 用 户 也 可 以 将 文本 设置 成 其 他 
颜色 。 选 中 要 设置 颜色 的 文本 ,在 属性 检查 器 中 单 击 颜色 块 髓 |， 在 打开 的 颜色 选择 器 中 单 
击 需要 使 用 的 颜色 即 可 。 用 户 也 可 以 从 屏幕 上 的 任何 位 置 取 色 ， 要 从 桌面 或 其 他 应 用 程序 
中 取 色 ， 可 按 住 鼠 标 左 键 ， 保 持 滴 管 的 焦点 ， 从 其 他 地 方 选择 颜色 即 可 。 如 果 用 户 想 获取 
更 多 的 颜色 选择 ， 可 单 击 颜色 选择 器 右上 角 的 按钮 ， 选 择 其 他 颜色 方案 ， 如 图 2-22 所 示 。 


xm 四国 | 


长 
| 字体 上 @) | 宋体 ， 新 宁 便 蜂 


| 址 加 现 js >| 硬 oo 
图 2-21 设置 文本 大 小 图 2-22 设置 文本 颜色 


要 清除 当前 颜色 而 不 选择 另 一 种 颜色 ， 请 单 击 【默认 颜色 】 按 钮 贺 ， 单 击 【 调 色 盘 】 
按钮 图 ， 可 打开 系统 颜色 选择 器 ， 您 可 以 自 定义 颜色 。 

注意 : 【立方 色 】、【 连 续 色 调 】〗 调 色 板 中 的 颜色 都 是 网 页 安全 色 ， 而 【Windows 系 
统 】、【Mac 系统 】、【 灰 度 等 级 】 中 的 颜色 则 不 是 。 


吧 什么 是 网 页 安全 色 ? 
饼 在 HTML 中 ,颜色 表示 成 十 六 进 制 值 (如 伍 F9900) 或 者 颜色 名 称 ( 如 red)。 网 页 安全 色 是 指 


以 256 色 模 式 运 行 时 ,无论 是 在 Windows 系统 还 是 在 Macintosh 系统 中 ,以 及 无 论 是 在 Netscape 
Navigator 还 是 在 Microsoft Internet Explorer 中 ， 均 显示 相同 的 颜色 。 这 意味 着 ， 如 果 网 页 使 用 
的 不 是 安全 色 ,那么 同一 网 页 在 不 同 操作 系统 下 以 及 使 用 不 同 浏览 器 时 , 可 能 显示 的 效果 不 同 。 


4. 设置 文本 的 粗 体 、 斜 体 
为 了 突出 内 容 的 重要 性 , 可 以 使 文本 加 粗 或 斜体 显示 。 选中 要 设置 粗 体 或 斜体 的 文本 ， 
在 属性 检查 器 中 单 击 【 粗 体 】| 卫 或 【斜体 】 按 钮 工 | 即 可 ， 如 图 2-23 所 示 。 
近期 流行 歌曲 ”近期 流行 歌曲 - 丰 世 流 疗 吕 巾 ” 近 舰 流 闻 吕 厂 
图 2-23 ”对 文本 应 用 粗 体 、 和 斜体 


2.1.6 设置 段落 格式 


用 户 可 以 对 段落 文本 进行 缩 进 、 对 齐 ， 还 可 以 快速 地 为 它们 应 用 标题 样式 。 对 段落 格 
式 进行 设置 时 ， 用 户 不 需要 选中 整个 段落 中 的 文本 ， 只 要 将 光标 定位 到 段落 中 即 可 。 
将 光标 定位 到 要 设置 格式 的 段落 中 , 在 属性 检查 器 单 击 【HTML]】 按钮 [4>xmcj， 在 【 格 


Ja0 
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式 】 下 拉 列 表 框 中 单 击 某 个 标题 样式 ， 即 可 将 其 应 用 于 光标 所 在 的 段落 ， 如 图 2-24 所 示 。 
如 果 要 删除 段落 样式 ， 可 单 击 【 无 】 选 项 。 


瘟 从 礼仪 的 角度 看 ， 着 装 不 能 简单 地 等 同 于 室 妇 。 它 是 着 人 基 自 和 约 内 作 -下 和 四 | 标本 2 
特点 ， 根 据 不 同 的 时 间 、 场 合 、 目 的 ， 力 所 能 及 地 对 所 年 的 了 类 心 的 选择 、 到 


从 礼仪 的 角度 看 ， 着 装 不 能 简单 地 等 同 于 穿 衣 。 ein bladd 审美 情趣、 身 笠 
目的 ， 力 所 能 及 地 对 所 穿 的 服 靶 进行 精心 的 选择 、 指 酝 


图 2-24 为 段落 应 用 “标题 4” 和 “标题 3” 样式 


注意 : 这 与 通过 HTML 标签 (如 表示 “标题 1” 的 hl1， 表 示 “ 标 题 2” 的 h2 等 ) 来 设置 段 
落 标 题 样式 的 效果 是 相同 的 ， 在 【代码 】 视 图 中 ， 用 户 可 发 现 相对 应 的 HTML 标签 已 添 
加 到 定义 段落 的 代码 中 。 加 

段落 文本 的 对 齐 在 网 页 布局 中 起 着 十 分 重要 的 作用 ， Dreamweaver 提供 了 左 对 齐 | 主 |、 
居中 对 齐 且 |}、 右 对 齐 重 ;和 两 端 对 齐 莉 4 种 方式 ， 用 户 只 需 在 属性 检查 器 中 单 击 对 应 的 按 
钮 即 可 。 

使 用 段落 缩 进 可 使 段落 显得 更 有 层次 感 。 在 属性 面板 中 单 击 【文本 凸 出 】 按 钮 | 毕 |， 
将 段落 凸 出 。 单 击 【 文 本 缩 进 】 按 钮 [ 吾 )， 可 将 段落 缩 进 ， 效果 如 图 2 2-25 所 示 。 


1. 文明 大 方 


。 要 求 着 半 要 符合 本 国 的 道统 和 举 规 做 法。 | 


在 正式 场合; 尽 弃 过 荐 过 透 、 过 短 和 过 
装 。 身 体 郭 位 的 过 分 暴露 ， 不 但 有 失 自 己 身份: 
而 且 也 失 坎 于 人 , 使 他 人 感到 多 有 不 便 。 


妈 2-25 ”段落 的 缩 进 效果 


2.1.7 ”对 文档 进行 拼写 检查 


发 布 到 Web 上 的 内 容 必 须 准确 无 误 .Dreamweaver 中 带 有 一 个 功能 强大 的 拼写 检查 器 ， 
它 不 仅 能 够 识别 常见 的 拼写 错误 ， 而 且 能 够 创建 自 定义 词典 。 

将 光标 置 于 页 面 中 要 开始 进行 拼写 检查 的 位 置 ， 选 择 【 命 令 】| 【拼写 检查 】 命 令 ， 即 
可 打开 【拼写 检查 】 对 话 框 ， 如 图 2-26 所 示 。Dreamweaver 会 从 当前 光标 所 在 的 位 置 开始 
进行 拼写 检查 ， 当 到 达 文 档 末 尾 时 ， 如 果 有 必要 ， 它 会 回 到 页 面 顶端 从 头 再 检查 一 遍 。 当 
【检查 拼写 】 对 话 框 出 现时 ， 它 会 立即 在 出 现 的 第 一 个 拼写 错误 上 打 标记 。 

选择 【建议 】 列 表 中 系统 字典 中 提供 的 正确 项 ， 单 击 【 更 改 】 按 钮 即 可 将 错误 修正 。 
系统 会 继续 查找 页 面 中 的 文字 错误 ， 进 行 重复 更 改 ， 使 用 建议 的 词 替换 掉 错误 的 词 即 可 。 
当 Dreamweaver 提示 “拼写 检查 完成 时 ”， 单 击 【 确 定 】 按 钮 即 可 ， 如 图 2-27 所 示 。 


中 失 T 浊 
best 


i 拼写 检查 完成 。 
(| 


2-26 【检查 拼写 】 对 话 框 2-27 ”Dreamweaver 提示 完成 拼写 检查 
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提示 :如果 Dreamweaver 识别 出 了 一 个 在 系统 字典 中 找 不 到 的 单词 ,用 户 可 以 单 击 【[ 忽 
略 】〗 按 钮 跳 过 它 , 或 者 单 击 【 添 加 到 私人 】〗 按 钮 将 该 单词 添加 到 您 的 私人 字典 中 。 这 样 当 
Dreamweaver 在 系统 字典 中 找 不 到 单词 时 ， 会 与 那些 存储 在 私人 词典 中 的 单词 加 以 比较 。 
如 果 找 到 的 话 ， 就 将 其 忽略 掉 。 另 外 ， 在 【检查 拼写 】 对 话 框 中 ， 如 果 建 议 的 词 全 都 不 与 
该 词 的 正确 拼写 相 匹配 , 那么 用 户 可 以 在 【更 改 为 】 文 本 框 中 手动 输入 一 个 拼写 正确 的 词 ， 
然后 单 击 【更 改 】 按 钮 即 可 。 


2.2 在 网 页 中 使 用 图 像 


在 网 页 中 适当 地 插入 图 像 可 以 使 网 页 增色 不 少 ， 更 重要 的 是 ， 可 以 借 此 更 加 直观 地 向 
访客 传达 信息 。 但 是 ， 图 像 的 大 小 和 数量 会 影响 网 页 的 下 载 时 间 。 因 此 ， 图 像 要 用 得 少 而 
精 ， 必 要 的 话 应 使 用 图 像 处 理 软件 ， 在 不 失真 的 情况 下 尽量 压缩 尺寸 。 

2.2.1 网 页 中 所 支持 的 图 像 文件 格式 


图 像 的 文件 格式 有 很 多 种 ， 但 网 页 中 通常 使 用 的 只 有 GIF、JPEG 和 PNG 这 3 种 ， 这 
3 种 格式 的 一 个 共同 特点 就 是 压缩 率 较 高 。 目 前 ，GIF 和 JPEG 文件 格式 的 支持 情况 最 好 ， 
大 多 数 浏览 器 都 可 以 正常 显示 它们 。PNG 文件 具有 较 大 的 灵活 性 并 且 文 件 大 小 较 小 ， 所 以 
它 对 于 显示 任何 类 型 的 Web 图 形 都 是 合适 的 。 
? ”GIF: 图 形 交 换 格式 。 这 种 格式 最 多 使 用 256 种 颜色 ， 最 适合 显示 色调 不 连续 或 具 
有 大 面积 单一 颜色 的 图 像 , 例如 导航 条 、 按 钮 、 图 标 或 其 他 具有 统一 色彩 和 色调 的 
图 像 。 更 重要 的 是 , 这 种 格式 的 图 像 可 以 在 网 页 中 以 透明 方式 显示 ,还 可 以 包含 动 
态 信 息 ， 因 此 成 为 网 页 中 应 用 最 广泛 的 一 种 格式 ， 许 多 动画 也 都 采用 这 种 格式 。 
? JPEG: 联合 图 像 专家 组 标准 。 这 是 用 于 摄影 或 连续 色调 图 像 的 高 级 格式 , 因为 JPEG 
文件 可 以 包含 数 百 万 种 颜色 。 可 以 对 JPEG 格式 的 图 像 进行 高 效 地 压缩 ， 在 图 像 文 
件 变 小 的 同时 保持 不 失真 (因为 丢失 的 内 容 通常 是 人 眼 不 易 察 觉 的 部 分 )。JPEG 常 
用 来 显示 颜色 丰富 的 精美 图 像 ， 如 照片 等 。 
? PNG: 可 移植 网 络 图 形 。 这 种 格式 集 JPEG 和 GIF 格式 优点 于 一 身 ， 既 有 GIF 能 透 
明显 示 的 特点 ， 又 具有 JPEG 处 理 精美 图 像 的 优势 ， 常 用 于 制作 网 页 效果 图 。 目 前 
PNG 格式 已 逐渐 成 为 网 页 图 像 的 主流 格式 ， 出 现在 各 大 网 站 中 。 


2.2.2 在 网 页 中 直接 插入 图 像 


将 光标 定位 到 网 页 中 要 插入 图 像 的 位 置 ， 如 图 2-28 所 示 。 在 【插入 】 面 板 的 【常用 】 
类 别 下 展开 【图 像 】 下 拉 按 钮 列表 ， 单 击 其 中 的 【图 像 】 命 令 ， 打 开 【 选 择 图 像 源 文件 】 
对 话 框 ， 如 图 2-29 所 示 。 
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图 2-28 定位 要 插入 图 像 的 位 置 图 2-29 【选择 图 像 源 文件 】 对 话 框 


选中 【文件 系统 】 单 选 按钮 ， 导 航 到 要 插入 的 图 像 文件 并 选中 。【URL】 文 本 框 中 显 
示 了 该 图 像 的 路 径 和 名 称 。 用 户 可 在 【相对 于 】 下 拉 列 表 框 中 设置 图 像 的 路 径 ， 分 相对 于 
站 点 根 目录 和 网 页 文档 两 种 方式 。 选 中 右 下 角 的 【预览 图 像 】 复 选 框 ， 可 在 对 话 框 右 侧 预 
览 该 图 像 。 

提示 : 无 论 是 相对 于 站 点 根 目录 还 是 网 页 文档 ， 这 里 使 用 的 都 是 文件 的 相对 路 径 ， 就 
是 网 页 文件 相对 于 站 点 根 目录 或 指定 网 页 文档 的 存放 路 径 。 


网 什么 是 网 页 文件 的 路 径 ? 绝对 路 径 和 相对 路 径 有 何 区 别 ? 
所 网 页 初学 者 在 学 习 网 页 制作 时 ， 常 常 遇 到 如 下 问题 : 制作 好 的 网 页 在 自己 机 器 上 可 以 正常 
浏览 ,而 当 把 页 面 上 传 到 服务 器 上 时 就 总 是 看 不 到 图 片 ，CSS 样式 表 失 效 等 。 这 种 情况 多 是 由 
于 使 用 了 错误 的 路 径 ， 导 致 浏览 器 无 法 在 指定 的 位 置 打开 指定 的 文件 。 

我 们 都 知道 , 平时 使 用 计算 机 要 找到 需要 的 文件 就 必须 知道 文件 的 位 置 ， 而 表示 文件 位 置 
的 方式 就 是 路 径 。 例 如 : c:/website/img/photo.jpg， 表 示 photo.jpg 文件 是 在 c 盘 的 website 目录 
下 的 img 子 目 录 中 。 类 似 于 这 样 完 整地 描述 文件 位 置 的 路 径 就 是 绝对 路 径 。 我 们 不 需要 知道 其 
他 任何 信息 就 可 以 根据 绝对 路 径 判断 出 文件 的 位 置 。 而 在 网 站 中 类 似 用 来 确定 文件 位 置 的 方式 
也 是 绝对 路 径 。 

如 果 用 户 使 用 绝对 路 径 , 那么 在 自己 的 计算 机 上 可 能 显示 正常 , 但 是 当 将 页 面 上 传 到 网 站 
的 时 候 就 可 能 出 错 了 。 因 为 网 站 可 能 在 服务 器 的 C 盘 ,也 可 能 在 DD 盘 , 还 可 能 在 某 个 目录 下 ， 
总 之 是 不 会 去 理会 c:/website/img/photo.jpg 这 样 一 个 路 径 。 解 决 方法 就 是 使 用 相对 路 径 。 

相对 路 径 ， 顾名思义 就 是 相对 目标 的 位 置 ， 例 如 相对 于 网 页 文档 c:/website/index.htm， 我 
们 就 可 以 使 用 img/photo.jpg 来 定位 图 像 文 件 。 这 样 不 论 将 这 些 文件 存放 到 哪里 , 只 要 它们 的 相 
对 路 径 没 有 变 ， 就 不 会 出 错 。 因 此 ,通常 设置 一 个 网 站 根 目录 ,然后 其 他 文件 都 使 用 相对 于 该 
根 目录 的 路 径 。 

在 Dreamweaver 中 ,为 了 避免 在 网 页 制作 时 出 现 路 径 错误 ,我 们 可 以 使 用 Dreamweaver 
的 站 点 管理 功能 来 管理 站 点 。 只 要 新 建站 点 并 定义 了 站 点 目录 之 后 ,系统 就 自动 将 绝对 路 径 转 
换 为 相对 路 径 ， 并 当 您 在 站 点 中 移动 文件 的 时 候 , 与 这 些 文件 关联 的 路 径 都 会 自动 更 改 , 而 无 
需 您 手动 进行 设置 。 


33 | 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


单 击 【 确 定 】 按 钮 ， 在 弹出 对 话 框 的 【 蔡 换 文本 】 下 拉 列 表 框 中 输入 当 浏 览 网 页 图 像 
不 能 正常 显示 或 将 光标 移 到 图 像 上 时 显示 的 提示 文本 ， 单 击 【 确 定 】 按 钮 ， 即 可 将 图 像 插 
入 页 面 中 ， 如 图 2-30 所 示 。 


图 2-30 在 页 面 中 直接 插入 图 像 


2.2.3 ”使 用 图 像 占 位 符 


在 网 页 制作 过 程 中 ， 如 果 需 要 插入 的 图 像 尚未 完成 ， 那 么 可 以 使 用 图 像 占 位 符 ， 以 避 
免 由 于 没有 图 像 而 导致 无 法 设计 网 页 的 爆 碎 。 

将 光标 定位 到 要 插入 图 像 占 位 符 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 类 别 下 展开 【图 
像 】 下 拉 按 钮 列表 ， 单 击 其 中 的 【图 像 占 位 符 】 命 令 ， 打开 【图 像 占 位 符 】 对 话 框 ， 如 图 
2-31 所 示 。 

在 【名 称 】 文 本 框 中 输入 占 位 符 的 名 称 ， 在 【宽度 】 和 【高 度 】 文 本 框 中 分 别 输入 占 
位 符 的 宽度 和 高 度 ， 在 【颜色 】 文 本 框 中 输入 占 位 符 的 显示 颜色 ， 在 【替换 文本 】 文 本 杠 
中 输入 占 位 符 的 简短 描述 。 完 成 后 单 击 【确定 】 按 钮 ， 即 可 在 页 面 中 插入 图 像 占 位 符 ， 如 
图 2-32 所 示 。 


图 2-31 【图 像 占 位 符 】 对 话 框 图 2-32 在 页 面 中 插入 图 像 占 位 符 


图 像 占 位 符 不 是 在 浏览 器 中 显示 的 图 形 或 图 像 ， 在 发 布 站 点 之 前 ， 应 该 使 用 适用 于 网 
页 文档 的 图 形 文件 蔡 换 所 有 的 图 像 占 位 符 。 双 击 图 像 占 位 符 ， 可 打开 【选择 图 像 源 文件 】 
对 话 框 ， 导 航 到 要 替换 图 像 占 位 符 的 图 像 文件 并 选中 ， 单 击 【确定 】 按 钮 。 图 2-33 所 示 是 
替换 为 图 像 后 的 效果 。 
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图 2-33 ” 蔡 换 页 面 中 的 图 像 占 位 符 


提示 : 如 果 图 像 占 位 符 和 实际 插入 的 图 像 大 小 不 一 致 ， 在 插入 图 像 后 ， 占 位 符 会 自动 
更 改 大 小 。 用 户 也 可 以 在 属性 检查 器 中 重新 设置 图 像 的 大 小 或 拖 动 图 像 边 框 进行 调节 。 


2.2.4 设置 图 像 属 性 
在 页 面 中 选中 图 像 元 素 ， 属 性 检查 器 如 图 2-34 所 示 ， 用 户 可 对 图 像 的 属性 进行 设置 。 
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2-34 图像 的 属性 参数 


? ”如 果 要 调节 图 像 的 大 小 ， 可 在 【 宽 】、【 高 文本 框 中 重新 设置 图 像 的 大 小 ， 默 认 
的 度量 单位 是 像素 。 如 果 用 户 希望 将 图 像 恢复 到 原始 大 小 ， 可 单 击 右 侧 按钮 。 
当然 ， 用 户 也 可 以 直接 在 页 面 中 通过 拖 动 图 像 的 边框 来 调整 其 大 小 。 

? 如果 要 使 用 新 图 像 蔡 换 原 来 的 图 像 ， 可 单 击 【 源 文件 】 右 侧 的 文件 夹 图 标 ， 在 打开 
的 【选择 图 像 源 文件 】 对 话 框 中 重新 选择 其 他 图 像 即 可 。 

? 如果 要 设置 图 像 与 文本 在 垂直 方向 以 及 水 平方 向 的 距离 ， 可 在 【垂直 边 距 】 和 【水 
平 边 距 】 文本 框 中 输入 值 即 可 ， 单 位 是 像素 。 图 2-35 分 别 显 示 了 没有 设置 边 距 、 


图 2-35 图 像 的 边 距 效果 
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框 设 置 为 3 像素 的 效果 。 
如 果 想 设置 图 像 与 同一 行文 本 的 对 齐 方式 , 可 在 [对 上 
齐 】 下 拉 列 表 框 中 进行 选择 。【 默 认 值 】 是 基线 对 上 i 
齐 ， 是 指 将 文本 基准 线 对 齐 图 像 底 端 ，【 顶端 Y 是 网 250 略 傣 的 边 栓 允 呆 
指 将 文本 行 中 最 高 字符 的 顶端 和 图 像 的 顶端 对 齐 ; 

【居中 】 是 指 将 文本 基准 线 和 对 象 的 中 部 对 齐 , 【底部 】 是 指 底 端 对 齐 ， 【文本 上 
方 】 是 指 将 文本 行 中 最 高 字符 和 图 像 的 上 端 对 齐 ;: 【绝对 居中 】 是 指 将 图 像 的 中 部 
和 文本 中 部 对 齐 ; 【绝对 底部 】 是 指 将 文本 的 绝对 底部 和 图 像 对 象 对 齐 ; 【 左 】 对 
齐 是 指 将 图 像 放置 在 左边 ,右边 可 以 绕 排 文 本 ; 【 右 对 齐 】 则 是 指 将 图 像 放置 在 右 
边 ， 左 边 可 以 绕 排 文本 。 

如 果 要 调整 图 像 的 明暗 度 ， 可 单 击 按钮 科 ， 将 打开 【亮度 /对 比 度 】 对 话 框 ， 如 图 
2-37 所 示 。 用 户 可 通过 滑 块 来 调整 图 像 的 明暗 度 以 及 对 比 度 。 选 中 【预览 】 复 选 
框 ， 在 调节 的 同时 观看 页 面 上 图 像 的 变化 。 

如 果 用 户 想 裁 掉 图 像 中 不 想 显示 的 部 分 ， 可 单 击 按钮 器 ， 图 像 周 围 就 会 出 现 阴影 
边框 ， 如 图 2-38 所 示 。 将 光标 移 到 图 像 的 边缘 ， 当 变 成 双向 的 水 平 、 垂 直 或 斜 箭 
头 时 拖 动 鼠标 ， 阴 影 部 分 的 面积 将 会 增 大 。 拖 动 至 合适 的 大 小 后 释放 鼠标 ， 完 成 坊 
切 范围 的 设置 。 最 后 再 单 击 按钮 品 ， 阴 影 部 分 的 图 像 即 被 裁 掉 。 


高 的 历史 价 信和 旷世 之 宝 国 名 于 世 的 宫 网 ， 哄 


图 2-37 设置 图 像 的 亮度 和 对 比 度 图 2-38 裁 切 图 像 


2.2.5 ”优化 图 像 的 尺寸 和 品质 


最 佳 的 Web 图 形 都 能 平衡 图 像 的 清晰 度 和 文件 的 大 小 。 用 户 可 以 对 网 页 中 的 图 像 进 行 
优化 ， 减 小 文件 的 大 小 。 同 时 ， 为 了 使 文件 大 小 更 小 ， 还 可 以 对 图 像 重 新 取样 。 单 击 图 像 
的 属性 检查 器 中 的 【编辑 图 像 设置 】 按 钮 畏 ， 打 开 【 图 像 预览 】 对 话 框 。 该 对 话 框 提供 了 
许多 不 同 的 图 像 优 化 选项 ， 例 如 将 GIF 这 样 的 Web 图 形 格式 转换 为 JPEG 格式 。 

在 【格式 】 下 拉 列 表 中 选择 【JPEG】, 然后 单 击 【 品 质 】 滑 块 , 将 其 设置 为 80。 在 【图 
像 预览 】 对 话 框 右 下 方 单 击 按钮 己 ， 将 右 侧 的 预览 分 成 两 个 视图 。 单 击 下 方 的 那个 视图 ， 
然后 单 击 【品质 】 滑 块 ， 将 其 设置 为 50， 如 图 2-39 所 示 。 
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2-39 ”对 图 像 进行 优化 并 对 比 


用 户 可 以 发 现 : 两 个 预览 之 间 的 图 像 品质 有 显著 差别 。 在 文件 大 小 方面 差别 也 比较 明 
显 : 对 于 JPEG 格式 ， 品 质 为 80 时 的 文件 大 小 为 16.48KB， 品 质 为 50 时 则 降 为 7.03KB。 
当 品 质 为 50 时 ， 可 以 发 现 ， 图 像 的 质量 明显 降低 了 。 用 户 可 调节 图 像 的 品质 ， 直 到 在 大 
小 和 质量 间 得 到 一 个 好 的 平衡 为 止 。 单 击 【 确 定 】 按 钮 ， 以 接受 对 图 像 的 新 设置 。 如 果 系 
统 提示 保存 Web 图 像 ， 可 选择 将 原 有 文件 蔡 换 即 可 。 

注意 : 用 户 可 能 注意 到 ， 显 示 在 属性 检查 器 里 的 图 像 尺 寸 要 比 【 图 像 预览 〗 对 话 框 中 
显示 的 图 像 尺寸 大 得 多 。 这 是 由 于 【图 像 预 览 】 对 话 框 在 打开 时 使 用 了 自动 缩放 功能 ， 您 
可 以 在 【文件 】 选 项 卡 下 查看 文件 的 缩放 比率 。 


2.2.6 ”使 用 鼠标 经 过 图 像 


鼠标 经 过 图 像 是 指 在 浏览 器 中 查看 网 页 时 ， 当 光标 经 过 图 像 时 图 像 变 为 其 他 图 像 ， 移 
开光 标 后 图 像 又 还 原 到 原始 图 像 的 一 种 网 页 制作 技术 。 它 实际 上 由 主 图 像 ( 当 首 次 载 入 页 面 
时 显示 的 图 像 ) 和 次 图 像 ( 当 光 标 移 过 主 图 像 时 显示 的 图 像 ) 两 部 分 组 成 。 主 图 像 和 次 图 像 的 
大 小 应 相等 ， 如 果 这 两 个 图 像 的 大 小 不 同 ，Dreamweaver 将 自动 调整 次 图 像 的 大 小 以 匹配 
主 图 像 的 属性 。 

将 光标 定位 到 页 面 中 要 创建 鼠标 经 过 图 像 的 位 置 ， 在 【插入 】 面 板 的 【常用 】 类 别 下 
展开 【图 像 】 下 拉 按 钮 列表 ， 单 击 其 中 的 【鼠标 经 过 图 像 】 命 令 ， 打 开 【 插 入 鼠标 经 过 图 
像 】 对 话 框 ， 如 图 2-40 所 示 。 
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图 2-40 【插入 鼠标 经 过 图 像 】 对 话 框 


首先 在 【图 像 名 称 】 对 话 框 中 定义 图 像 的 名 称 ， 然 后 单 击 【 原 始 图 像 】 右 侧 的 【浏览 】 
按钮 ， 在 打开 的 对 话 框 中 选择 要 作为 主 图 像 的 图 片 ， 如 图 2-41 所 示 。 最 后 以 同样 的 方法 设 


置 【 鼠 标 经 过 图 像 】， 即 次 图 像 。 


人 


图 2-41 选择 并 预览 原始 图 像 


设置 好 后 ， 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 2-42 所 示 。 
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图 2-42 鼠标 经 过 图 像 效 果 
2.2.7 ”使 用 导航 条 


导航 条 是 具有 导航 功能 的 图 像 组 ， 它 由 多 个 图 像 导 航 条 元 件 组 成 。 每 个 图 像 导 航 条 元 
件 包 括 1 到 4 张 图 像 ， 分 别 对 应 鼠标 的 不 同 状态 ， 当 鼠标 处 于 某 种 状态 时 就 显示 该 状态 下 


鼠标 经 过 图 像 鼠标 按 下 图 像 


2-43 ”导航 条 中 对 应 不 同 鼠 标 状态 下 的 图 像 


要 在 页 面 中 插入 导航 条 ， 需 要 首先 将 鼠标 定位 到 页 面 中 要 插入 导航 条 的 位 置 。 然 后 在 
【插入 】 面 板 的 【常用 】 类 别 下 展开 【图 像 】 下 拉 按 钮 列表 ， 单 击 其 中 的 【插入 导航 条 】 


EE 
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命令 ， 打 开 【 插 入 导航 条 】 对 话 框 ， 如 图 2-44 所 示 。 


图 2-44 【插入 导航 条 】 对 话 框 


在 【项 目 名 称 】 文 本 框 中 用 户 可 命名 图 像 导 航 条 元 件 的 名 称 ， 然 后 通过 【浏览 】 按 钮 
分 别 设置 其 状态 图 像 、 鼠 标 经 过 图 像 、 按 下 图 像 和 按 下 时 鼠标 经 过 图 像 。 

提示 : 用 户 可 以 只 设置 对 应 部 分 鼠标 状态 的 图 像 ， 即 可 以 有 选择 地 使 用 状态 图 像 、 鼠 
标 经 过 图 像 、 按 下 图 像 和 按 下 时 鼠标 经 过 图 像 ， 而 不 是 全 部 使 用 。 

网 页 的 导航 条 一 般 都 有 链接 功能 ， 即 当 用 户 单 击 导航 条 中 某 个 图 像 时 ， 将 打开 一 个 新 
的 网 页 。 要 设置 导航 链接 ， 可 通过 【 按 下 时 ， 前 往 的 URL) 文本 框 来 设置 ， 既 可 以 链接 到 
站 点 内 的 某 个 文档 ， 也 可 以 链接 到 Internet 上 的 其 他 网 页 (输入 其 网 址 即 可 )。 

在 【选项 】 区 域 ， 用 户 可 以 设置 在 页 面 载 入 时 图 像 导航 条 元 件 显 示 什么 图 像 ， 是 状态 
图 像 ( 即 预 先 载 入 图 像 ) 还 是 鼠标 按 下 图 像 。 在 【插入 】 下 拉 列 表 框 中 ， 用 户 可 以 选择 导航 
条 在 页 面 中 的 插入 方式 , 是 水 平方 式 还 是 垂直 方式 , 图 2-43 中 使 用 的 是 水 平方 式 。 选 中 【使 
用 表格 】 复 选 框 ， 导 航 条 将 容纳 在 表格 中 ， 以 表格 形式 插入 页 面 中 。 


本 章 小 结 


文本 和 图 像 是 网 页 的 最 基本 元 素 ， 也 是 传达 信息 最 直接 有 效 的 方式 。 掌 握 页 面 中 文本 
和 图 像 的 插入 方式 ， 是 制作 网 页 的 基本 功 。 本 章 介 绍 了 各 种 文本 的 插入 方式 ， 包 括 文字 、 
水 平 线 、 日 期 、 空 格 以 及 货币 、 版 权 符号 等 一 些 特殊 文本 。 另 外 还 介绍 了 页 面 中 文本 和 段 
落 的 格式 设置 ， 以 及 常用 的 各 种 列表 。 

对 于 图 像 ， 读 者 首先 需要 了 解 网 页 所 支持 的 图 像 格式 ， 以 及 它们 的 特点 ， 然 后 才能 根 
据 页 面 的 具体 需要 ， 在 保证 图 像 质量 的 前 提 下 通过 本 章 介绍 的 方法 在 页 面 中 插入 并 设置 图 
像 ， 并 尽 可 能 在 较 短 时 间 内 完成 页 面 下 载 ， 减 小 访客 等 待 的 时 间 。 
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习 题 

填空 题 

1. 进行 文本 输入 时 ，Dreamweaver 不 会 自动 进行 换行 , 用户 可 使 用 键 来 手动 换行 。 如 果 要 分 段 ， 
则 需要 按 键 。 

2. 在 Dreamweaver 中 ， 由 于 文档 格式 都 是 以 HTML 形式 存在 的 ， 所 以 要 在 字符 之 间或 段 首 添加 空格 ， 
可 按 键 。 

3. 对 于 具有 相似 性 质 或 某 种 顺序 的 文本 ， 用 户 还 可 以 对 它们 应 用 

4. 要 在 页 面 中 显示 已 经 组 织 好 的 数据 ， 是 最 有 效 的 方式 。 

5. Dreamweaver 的 页 面 使 用 的 都 是 的 结构 ， 浏 览 器 在 读 取 页 面 的 时 候 都 是 从 本 地 字库 调用 。 

6. 在 网 页 制作 过 程 中 ， 如 果 需 要 插入 的 图 像 尚未 完成 ， 则 可 以 使 用 ， 以 避免 由 于 没有 图 像 而 导 
致 无 法 设计 网 页 的 尴 论 。 

7. 鼠标 经 过 图 像 实际 上 由 ( 当 首 次 载 入 页 面 时 显示 的 图 像 ) 和 ( 当 光 标 移 过 主 图 像 时 


显示 的 图 像 ) 两 部 分 组 成 。 

选择 题 

8. 可 以 使 用 一 个 或 多 个 ( “) 来 分 隔 文 本 或 对 象 ， 从 而 使 网 页 更 有 条 理 和 层次 感 。 
A. 空格 B. 水 平 线 C. 列表 

9. 要 使 图 像 动态 地 显示 ， 最 理想 的 格式 是 ( )。 
A. GIF B. PNG C. JPEG 

简 答题 

10. 什么 是 网 页 的 安全 色 ， 它 有 什么 作用 ? 

11. 鼠标 经 过 图 像 和 导航 条 有 何 区 别 ? 

上 机 操作 题 

12. 基于 本 章 提供 的 素材 ， 练 习 在 网 页 中 插入 文本 、 图 像 等 ， 并 设置 它们 的 格式 。 


lao 
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bd 
CSS 基础 知识 
本 章 介 绍 使 用 CSS 美化 和 统一 网 页 外 观 的 基础 知识 。 通 过 本 章 的 学 习 ， 应 该 完成 以 下 
学 习 目 标 : 
YY 了 解 Web 标准 和 为 什么 要 使 用 CSS 
YY 学 会 创建 CSS 


fy 学 会 使 用 CSS 定义 各 种 网 页 元 素 外 观 
fy 掌握 CSS 的 各 种 应 用 方式 
f 记 ”掌握 CSS 的 管理 方法 


3.1 CSS 与 Web 标准 概述 


CSS 即 层 倒 样 式 表 (Cascading Style Sheets)， 是 由 W3C 开发 的 一 种 HTML 规范 ， 可 以 
用 来 统一 页 面 的 外 观 ， 对 页 面 元 素 的 显示 效果 进行 精确 控制 ， 已 经 成 为 当前 流行 的 网 页 制 
作 技 术 。 


3.1.1 什么 是 Web 标准 


讲 到 CSS， 就 不 得 不 提 到 Web 标准 。Web 标准 不 是 某 一 个 标准 , 而 是 一 系列 标准 的 集 
合 。 网 页 主要 由 3 部 分 组 成 : 结构 、 表 现 和 行为 。 对 应 的 Web 标准 也 就 分 为 3 个 标准 集 : 
结构 标准 主要 是 XHTML 和 XML， 表 现 标 准 主 要 是 CSS， 行 为 标准 主要 是 对 象 模型 。 

1. 结构 标准 

结构 用 于 对 网 页 中 的 信息 进行 整理 和 分 类 。HTML( 超 文本 标记 语言 ，Hyper Text 
Markup Language) 是 最 早 也 是 最 基本 的 Web 描述 语言 ， 由 Tim Berners-lee 提出 。HTML 文 
本 是 由 HTML 命令 组 成 的 描述 性 文本 ， 可 以 标记 文字 、 图 形 、 动 画 、 声 音 、 表 格 、 超 链接 
等 。HTML 的 结构 包括 头 部 (Head) 和 主体 (Body) 两 大 部 分 : 头 部 描述 浏览 器 所 需 的 信息 ， 
主体 包含 网 页 的 具体 内 容 。 

目前 遵循 的 结构 标准 是 XML 和 XHTML。XML， 即 可 扩展 标记 语言 (The Extensible 
Markup Language) 是 一 种 能 定义 其 他 语言 的 语言 .XML 最 初 的 设计 目标 是 弥补 HTML 的 不 
足 , 以 强大 的 扩展 性 满足 网 络 信息 发 布 的 需要 , 后 来 逐渐 用 于 网 络 数据 的 转换 和 描述 .XML 
的 数据 转换 能 力 虽 然 强 大 ， 并 完全 可 以 替代 HIML， 但 面 对 成 千 上 万 已 有 的 站 点 ， 直 接 采 
用 XML 为 时 过 早 ,为 此 ,在 HTML 4.0 的 基础 上 ,用 XML 对 其 进行 扩展 , 便 形 成 了 XHTML 。 
XHTML 用 于 实现 HTML 向 XML 的 过 渡 。 
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2. 表现 标准 
表现 技术 用 于 对 已 经 被 结构 化 的 信息 进行 显示 上 的 控制 ， 包 括 版 式 、 颜 色 、 大 小 等 形 
式 控制 。 用 于 表现 的 Web 标准 是 CSS， 目 前 其 最 新 标准 为 CSS 3.0。CSS 标准 的 目的 是 以 
CSS 来 描述 整个 页 面 的 布局 设计 , 与 HTML 所 负责 的 结构 分 开 。 使 用 CSS 布局 与 XHTML 
所 描述 的 信息 结构 相 结 合 , 能 够 帮助 网 页 设计 师 分 离 出 表现 与 内 容 , 使 Web 站 点 的 构建 和 
维护 更 加 容易 。 
3. 行为 标准 
行为 是 指 对 整个 文档 内 部 的 一 个 模型 定义 及 交互 行为 的 编写 ， 用 于 编写 用 户 可 进行 交 
互 式 操 作 的 文档 。 行 为 标准 主要 有 : 
? DOM( 文 档 对 象 模型 ) 根据 W3C DOM 规范 ，DOM 是 一 种 让 浏览 器 与 内 容 结 构 之 
间 沟 通 的 接口 ， 是 页 面 上 的 一 些 标准 组 件 。 它 给 予 Web 设计 师 和 开发 人 员 一 个 标 
准 的 方法 ， 使 他 们 来 访问 站 点 中 的 数据 、 脚 本 和 表现 层 对 象 。 
? ECMAScript 脚本 语言 由 CMA 制定 的 标准 脚本 语言 ， 用 于 实现 具体 的 界面 上 对 
象 的 交互 操作 。 


3.1.2 ”Web 标准 有 何 好 处 


真正 符合 Web 标准 的 网 页 设计 是 指 能 够 灵活 使 用 Web 标准 对 网 页 内 容 进 行 结构 、 
现 与 行为 的 分 离 一 即 表现 与 内 容 的 分 离 。 内 容 是 指 具 体 的 信息 ， 仅 仅 表示 信息 正文 ， 
文通 过 XHTML 结构 化 语言 被 标记 为 各 个 独立 部 分 ， 如 左 分 栏 、 右 分 栏 、 新 闻 列 表 等 。 
现 是 指 信息 的 展示 形式 ， 如 对 字号 、 字 体 、 排 版 的 设计 称 之 为 表现 。 使 用 表现 与 内 容 分 
技术 的 好 处 主要 体现 在 以 下 几 个 方面 : 

1. 高 效率 与 易 维护 

在 网 站 的 设计 过 程 中 ， 开 发 人 员 最 希望 的 就 是 高 效 开发 与 简单 维护 ， 这 也 是 网 站 的 开 
发 与 运营 成 本 的 关键 所 在 。 

由 表现 与 内 容 分 离 所 带 来 的 高 效 开 发 是 指 : 通过 内 容 与 表现 的 分 离 技术 ， 可 以 使 具体 
内 容 与 样式 设计 分 离开 来 ， 并 使 得 同一 个 设计 可 以 重复 使 用 。 当 定义 界面 上 某 一 个 元 素 的 
样式 以 后 ， 可 以 将 该 设计 样式 重用 于 另 一 个 信息 内 容 之 中 。 直 接应 用 或 继承 这 段 代码 进行 
扩展 ， 达 到 重用 的 目的 ， 可 以 减少 重复 代码 ， 加 快 开发 效率 。 

而 这 种 重用 的 手段 在 维护 中 同样 可 以 起 到 事半功倍 的 作用 ， 通 过 修改 同一 个 代码 ， 可 
以 使 得 重用 这 段 代 码 的 所 有 区 域 同 时 改变 样式 设计 ， 使 维护 简单 高 效 。 更 值得 庆幸 的 是 ， 
由 于 内 容 和 表现 分 离 ， 网 页 设计 人 员 可 以 只 关注 于 样式 的 表现 而 不 用 重复 定义 样式 内 容 ， 
在 可 读 性 和 维护 性 上 都 得 到 了 极 大 的 提高 。 

2. 信息 跨 平台 的 可 用 性 

通过 将 内 容 与 设计 进行 分 高， 我 们 可 以 使 得 信息 实现 跨 平台 访问 。 例 如 针对 掌上 电脑 
或 游戏 终端 ， 我 们 只 要 蔡 换 一 个 样式 设计 文件 即 可 使 页 面 在 这 些 设备 上 以 不 同 的 样式 来 表 
现 ， 以 适应 不 同 设备 的 屏幕 ， 而 页 面 的 内 容 无 需 改 变 。 

3. 降低 服务 器 成 本 

通过 样式 的 重用 ， 整 个 网 站 的 文件 量 可 以 成 倍 地 减 小 ， 使 得 降低 服务 器 带宽 成 本 成 为 


表 
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可 能 。 特 别 是 对 大 型 门户 网 站 ， 网 页 数量 越 大 ， 便 意味 着 重用 的 代码 数量 越 多 ， 从 而 使 得 
同一 时 间 服 务 器 的 数据 访问 量 降低 ， 降 低 带 宽 使 用 。 

4. 加 快 页 面 解析 速度 

相对 于 老式 的 内 容 与 设计 混合 编码 而 言 ， 这 种 内 容 与 设计 分 离 的 网 页 设计 ， 使 得 浏览 
器 对 网 页 的 解析 速度 大 幅 提高 。 浏 览 器 在 解析 中 可 以 以 更 好 的 解析 方式 分 析 结 构 元 素 与 设 
计 元 素 ， 而 良好 的 网 页 浏览 速度 使 得 用 户 的 浏览 体验 得 到 提升 。 

5. 与 未 来 兼容 

由 于 已 经 将 内 容 和 设计 分 开 ， 不 用 再 担心 未 来 的 技术 变革 ， 无 论 是 结构 还 是 设计 ， 都 
可 以 随时 替换 或 修改 ， 不 需要 再 在 混杂 着 信息 与 设计 的 代码 中 进行 修改 了 。 

符合 Web 标准 的 Web 设计 还 有 更 多 优势 ，Web 标准 已 经 逐步 普及 为 一 种 趋势 ， 符 合 
Web 标准 的 网 页 设计 正在 改变 着 大 家 的 浏览 体验 。 事 实 上 ， 大 家 在 使 用 Dreamweaver CS4 
进行 网 页 制作 时 ， 就 已 经 在 开始 使 用 Web 标准 技术 。 在 进行 网 页 设计 时 ， 实 际 上 网 页 编辑 
器 正在 为 我 们 自动 编写 符合 Web 标准 的 各 个 技术 代码 段 。 


3.1.3 CSS 的 语法 结构 


CSS 的 语法 结构 由 3 部 分 组 成 : 选择 符 (selector)、 属 性 (property) 和 值 (value)。 使 用 格 
式 如 下 : 


selector (property;value;) 


? 选择 符 : 要 将 CSS 应 用 到 XHTML 中 ， 首 先 要 做 的 就 是 选择 合适 的 选择 符 。 选 择 
符 是 CSS 控制 XHTML 文档 中 对 象 的 一 种 方式 ， 用 于 告诉 浏览 器 这 段 样式 将 应 用 
到 哪个 对 象 。 

? 属性 : 属性 是 CSS 样式 控制 的 核心 ， 对 于 每 一 个 XHTML 中 的 标签 ，CSS 都 提供 
了 丰富 的 样式 属性 ， 如 颜色 、 大 小 、 定 位 、 浮 动 方式 等 。 

? 值 : 是 指 属性 的 值 ， 形 式 有 两 种 。 一 种 是 指定 范围 的 值 ， 如 float 属性 ， 只 可 能 应 
用 left、right、none 这 3 个 值 。 另 一 种 为 数值 ， 如 width 属性 ， 能 够 使 用 0-9999px 
或 其 他 数学 单位 。 

在 实际 应 用 中 ， 我 们 往往 使 用 与 下 面 类 似 的 应 用 形式 : 


body{background-color;blue;} 


表示 选择 对 象 为 body， 即 选择 了 页 面 中 的 <body> 标 签 ; 属性 为 background-color， 用 
于 控制 对 象 的 背景 颜色 ; 值 为 blue， 即 蓝 色 。 这 组 CSS 代码 定义 了 页 面 中 的 body 对 象 的 
背景 颜色 为 蓝 色 。 
除了 单个 属性 的 定义 ， 用 户 还 可 以 为 一 个 标签 定义 多 个 属性 ， 每 个 属性 用 逗号 分 开 即 
可 ， 如 下 所 示 : 
Pi 
text-align:center; 
color:black? 


font-family:arial; 


} 
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上 面 的 CSS 代码 定义 了 <p> 标 签 的 3 个 样式 属性 ， 即 对 齐 方式 、 文 本 颜色 和 字体 。 对 
于 同一 个 id 或 class， 用 户 都 可 以 用 上 面 的 形式 来 定义 其 样式 。 
提示 : CSS 中 对 选择 符 进行 了 分 类 , 关于 它们 的 具体 说 明和 用 法 , 读者 可 参考 附录 A。 


3.2 创建 并 定义 CSS 样式 


CSS 可 以 保存 在 当前 的 页 面 中 ,也 可 以 作为 一 个 独立 的 文件 (通常 扩展 名 为 .css) 保 存在 
网 页 外 部 。 一 般 情况 下 ， 一 个 网 站 中 至 少 要 有 一 个 外 部 CSS 文件 ， 用 于 设置 整个 站 点 中 页 
面 的 大 部 分 样式 。 而 对 于 个 别 网 页 中 需要 的 样式 ， 通 常 将 其 保存 在 网 页 内 部 。 


3.2.1 CSS 样式 面板 
通过 【CSS 样式 】 面 板 , 用 户 可 以 方便 地 创建 、 编 辑 和 修改 CSS 样式 ， 如 图 3-1 所 示 。 


附加 外 部 样式 表 文件 
外 部 样式 表 文 新 建 CSS 规则 
3 
“espmivavaa” 的 必 星 
辑 CSS 规则 
样式 属性 及 值 一 和 | " 

bm ght Sy 

wdth So0yz 

E31 


切换 视图 一 一 CE] 如 沪 汪 
图 3-1 【CSS 样式 】 面 板 


【全 部 】 选 项 卡 下 显示 了 页 面 中 的 所 有 CSS 规则 ， 包 括 附加 的 外 部 样式 和 内 部 样式 。 
在 【所 有 规则 】 下 单 击 某 个 样式 名 称 ， 下 方 的 列表 框 中 将 显示 该 样式 下 具体 的 每 个 属性 及 
对 应 值 。 单 击 【 添 加 属性 】 链 接 ， 可 向 该 样式 添加 属性 并 设置 值 。 

默认 情况 下 ， 属 性 列表 中 只 显示 已 设置 的 样式 属性 ， 如 果 想 分 类 别 显示 样式 的 属性 ， 
可 通过 单 击 按钮 | 奔 进 行 切换 ， 如 图 3-2 所 示 。 属 性 列表 中 按 字体 、 背 景 、 区 块 等 来 进行 显 
示 ， 用 户 可 直接 设置 要 修改 这 些 类 别 下 的 属性 值 。 如 果 用 户 想 以 列表 方式 显示 样式 下 可 以 
设置 的 所 有 属性 ， 可 单 击 按钮 2 进行 切换 ， 如 图 3.3 所 示 。 


sa” 的 帮 性 
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backeremd re padaingrri 卫 | B= 
backeramd-po peiding- tp 

田 区 块 totalie right 

图 过 把 诗 id 各 
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。 第 3 章 CSS 基础 知识 。 
3.2.2 新建 CSS 规则 


在 【CSS 样式 】 面 板 单 击 【新 建 CSS 规则 】 按 钮 ， 打 开 【 新 建 CSS 规则 】 对 话 框 ， 
如 图 3-4 所 示 。 首 先 应 选择 要 使 用 的 选择 器 类 型 ( 即 选择 符 )， 这 是 定义 CSS 样式 的 第 一 步 。 

? 【类 】( 可 应 用 于 任何 HTML 元 素 ): 选中 该 选项 可 以 创建 class CSS 样式 ， 在 【名 

称 】 下 拉 列 表 框 中 选择 或 输入 class 的 名 称 ， 即 可 对 页 面 中 所 有 class 属性 为 该 名 称 
的 页 面 元 素 定义 样式 。class 样式 定义 后 需要 手动 对 网 页 元 素 进行 样式 应 用 。 

? 【标签 】( 重 新 定义 HTML 元 素 ): 选中 该 选项 ， 可 以 创建 标签 CSS 样式 。 在 【 标 
签 】 下 拉 列 表 框 中 选择 或 输入 标签 的 名 称 ， 即 可 对 XHTML 标签 进行 样式 定义 ， 如 
图 3-5 所 示 。 该 样式 定义 后 将 自动 应 用 到 页 面 元 素 上 。 

| 


LDL -加 
下 表 加 过 天- ER ln CE 
浴 [55 雪崩 生活 上 下 女 轩 闫 因 的 型。 一 为 CE 类 由 思拓 上 下 区 过 竹 圣 % 妆 
a 加 CE 一 | | WE 一 | 一 
论 圭 二 名 枉 - | 这 漠 器 坟 稀 
区 W 人 已 乱 本 十 的 ， | 难 各 址 统 入 这 括 得 二 1 
NE ~) kr x=) 
LE 于 
现 刚 次 又 观 几 委 : 
惠 闫 忆 作 观 内 性 午 、 | 起 卫 十 又 各 Ji 要 
[i = em | EL 站 | Cm | 
图 3-4 新 建 类 CSS 规则 图 3-5 新 建 标签 CSS 规则 


? 【ID( 仅 应 用 于 一 个 HTML 元 素 )】: 选中 该 单 选 按钮 ， 可 以 创建 ID 或 伪 类 CSS 样 
式 ， 可 以 在 【选择 器 】 下 拉 列 表 中 选择 要 使 用 的 伪 类 ， 例 如 超级 链接 的 各 种 点 击 、 
移 过 等 样式 ， 如 图 3-6 所 示 。 样 式 定义 后 会 自动 应 用 到 页 面 元 素 中 。 


进 择 杰 休 型- 
为 CS 规 网 轩 冯 上下文 洁 振 出 交 措 ， 
了 0( 职 四 用 于 一 个 如 已 浆 案 》 | 


NE 朗 
允 括 完 公 让 风 pA 作 括 。 
叮 建 生 式 表 广 f) | 


| 
图 3-6 ”新建 ID 或 伪 类 CSS 规则 
选择 了 选择 符 后 ， 接 下 来 需要 定义 CSS 样式 的 存放 位 置 。 选 中 【新 建 样式 表 文 件 】 选 
项 ， 可 以 新 建 一 个 外 部 的 CSS 样式 文件 ， 并 将 创建 的 CSS 样式 信息 保存 在 该 文件 中 。 如 
果 当 前 页 面 中 已 经 链接 有 外 部 CSS 样式 文件 ， 可 以 在 该 下 拉 列 表 框 中 选择 该 CSS 文件 ， 
这 样 新 建 的 CSS 样式 信息 将 保存 到 该 文件 中 。 用 户 也 可 以 将 样式 信息 保存 到 当前 页 面 中 ， 
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选择 【 仅 对 此 文档 】 选 项 即 可 。 
3.2.3 ”定义 文本 样式 


选择 好 CSS 规则 的 选择 器 和 保存 位 置 后 ， 就 可 以 来 具体 定义 属性 及 其 值 了 。 通 过 
Dreamweaver CS4 的 【CSS 样式 定义 】 对 话 框 ， 用 户 可 以 可 视 化 地 定义 这 些 属 性 ， 而 不 用 
手动 编写 代码 。 

在 【新 建 CSS 规则 】 对 话 框 中 , 如 果 用 户 选择 将 CSS 规则 以 新 建 样式 表 文 件 方式 保存 ， 
单 击 【确定 】 按 钮 后 ， 系 统 会 打开 【保存 样式 表 文 件 为 】 对 话 框 ， 提 示 用 户 对 文件 保存 ， 
如 图 3-7 所 示 。 输 入 CSS 样式 文件 的 名 称 并 设置 保存 路 径 后 ， 单 击 【保存 】 按 钮 ， 可 打开 
【CSS 样式 定义 】 对 话 框 ， 如 图 3-8 所 示 。 如 果 用 户 选择 将 CSS 规则 保存 在 页 面 中 或 页 面 
已 经 附加 的 样式 表 文 件 中 ， 单 击 【 确 定 】 按 钮 后 ， 将 直接 打开 【CSS 样式 定义 】 对 话 框 。 


种 什 


EN 
无 四 入 大 SOP 入 征 实 商 0 开 委 ， 


图 3-7 保存 CSS 样式 表 文件 图 3-8 【CSS 样式 定义 】 对 话 框 


通过 【类 型 】 下 的 选项 ， 用 户 可 以 定义 文本 的 字体 、 大 小 、 样 式 、 粗 体 、 颜 色 、 行 高 
等 ， 还 可 以 应 用 下 划 线 、 上 划 线 、 删 除 线 或 内 烁 修饰 效果 。 图 3-9 显示 了 部 分 效果 。 


ea Wd 俱乐部 对 承 小 班 制 ， 人 性 化 授课 原则 ， 
| 
队 教 相 缕 加 盟 俱 和 部。 他们 过 而 的 泳 队 教 仍 相继 加 盟 候 乐 部 。 他 们 过 硬 的 
图 3-8 中 设置 的 效果 使 用 下 划 线 


乐 部 息 承 小 班 制 。 人 性 化 授课 原则 te 人 位 化 六 桨 原 WU ,| 


市 游泳 队 教练 相继 加 盟 俱 乐 部 。 他 们 el 
【粗细 】 设置 为 使 用 粗 体 【样式 】 设 置 为 斜体 


图 3-9 部 分 文本 样式 效果 


3.2.4 定义 背景 样式 


在 【CSS 规则 定义 】 对 话 框 的 【分 类 】 列 表 框 中 单 击 【背景 〗 选 项 ， 即 可 在 右 侧 选项 
中 对 背景 样式 进行 定义 ， 如 图 3-10 所 示 。 


la _ 
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0 -. 铬 bc 
要 页 吕 本 姑 


网 页 中 的 背景 图 像 通常 都 是 一 些小 图 片 ， 以 重复 方式 充满 整个 页 面 。 单 击 【背景 图 像 】 
右 侧 的 【浏览 】 按 钮 ， 可 在 打开 的 对 话 框 中 选择 要 作为 页 面 背景 的 图 片 ， 然 后 在 【重复 】 
下 拉 列 表 框 中 选择 图 像 的 重复 方式 。 除 了 默认 的 重复 方式 外 ， 还 有 横向 重复 和 纵向 重复 两 
种 , 指 分 别 沿 水 平和 垂直 方向 对 背景 图 片 重复 , 例如 图 3-11 中 使 用 的 就 是 横向 重复 。 当然， 
用 户 也 可 以 选择 不 重复 背景 图 像 。 


9 乐园 

咀 学 为 主 付 的 而 出 一 向 卡 部 、 曾 评 与 再 昌 价 情 图 拉 
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卫生 标 才 * 


3-11 背景 图 像 的 横向 重复 


通过 【附件 】 下 拉 列 表 框 ， 用 户 可 以 设置 背景 图 像 是 固定 在 原始 位 置 还 是 随 页 面 内 容 
一 同 滚动 。【 水 平 位 置 】 和 【垂直 位 置 】 下 拉 列 表 框 用 于 设置 背景 图 像 相 对 于 页 面 元 素 的 
初始 位 置 ， 这 可 以 用 于 将 背景 图 像 与 页 面 中 心 水 平 或 垂直 对 齐 。 

注意 : 用 户 也 可 以 为 整个 页 面 设 置 背景 图 像 ， 也 可 以 为 某 个 具体 的 页 面 元 素 单 独 设置 
背景 图 像 , 这 取决 于 在 定义 CSS 规则 时 所 选择 的 选择 器 。 另 外 , 用 户 也 可 以 仅仅 设置 背景 
颜色 而 不 使 用 背景 图 像 。 
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3.2.5 ”定义 区 块 样式 


区 块 是 指 页 面 中 的 文本 、 图 像 和 层 等 蔡 代 元 素 ，【 区 块 】 样 式 用 于 控制 块 中 元 素 的 间 
距 和 对 齐 方式 等 ， 如 图 3-12 所 示 。 


; 幸 白 昭 丹 将 歼 抹 
i 忽 间 岸上 中 歌 严 
柄 花 主 求 榨 干 尺 


村 去 区 起 
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1 不 [及 - 王 . 伦 
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嫩 面 对 开 NI， 懈 请 一 


文本 寻 语 TT): 下 挤 

文字 者 直 加 )) 到 | 二 一 
斌 性 向 ): 不 摘 厅 
BD 


图 3-12 区 块 样式 应 用 效果 


可 以 设置 单词 、 字 母 间 的 间距 ， 垂 直 对 齐 方式 和 文本 对 齐 方式 。 如 果 想 让 文本 块 内 第 
一 行文 本 缩 进 显示 ， 还 可 以 在 【文字 缩 进 】 文 本 框 中 进行 设置 。【 空 格 】 下 拉 列 表 框 中 提 
供 了 处 理 空白 的 3 种 方式 : 保留 、 正 常 和 不 换行 。 保 留 方式 可 保留 所 有 空白 ， 包 括 空格 、 
制 表 符 和 回 车 ;正常 方式 则 可 收缩 空白 ， 不 换行 方式 则 只 在 遇 到 <br> 标 签 时 文本 才 换 行 。 
在 【显示 】 下 拉 列 表 框 中 可 以 指定 是 否 显示 以 及 如 何 显示 元 素 。 


3.2.6 ”定义 方 框 样式 


【 方 框 】 样 式 用 于 控制 元 素 在 页 面 上 的 放置 方式 ， 以 及 页 面 元 素 的 大 小 、 浮 动 方式 、 
填充 大 小 、 边 界 等 ， 如 图 3-13 所 示 。 


填充 
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图 3-13 方 框 样式 应 用 效果 


在 【高 】 和 【 宽 】 下 拉 列 表 框 中 可 以 设置 元 素 的 大 小 ， 元 素 一 般 为 图 片 、 表 格 或 层 等 。 
【填充 】 选 项 区 域 用 于 指定 元 素 内 容 与 边框 之 间 的 间距 ， 选 中 【全 部 相同 】 复 选 框 可 将 相 
同 的 填充 属性 应 用 于 元 素 的 上 、 下 、 左 、 右 侧 边 。 用 户 也 可 以 分 别 为 每 个 边 设置 填充 ， 只 
需 禁用 【全 部 相同 】 复 选 框 即 可 。【 边 界 】 选 项 区 域 则 用 于 设置 元 素 的 边框 与 另 一 个 元 素 
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之 间 的 间距 。 

通过 【浮动 】 下 拉 列 表 框 ， 用 户 可 以 设置 元 素 的 浮动 方式 ， 其 他 元 素 则 按照 设置 环绕 
在 浮动 元 素 的 周围 。 通 过 【清除 】 下 拉 列 表 框 ， 可 以 取消 元 素 的 浮动 : 【 左 对 齐 】 表 示 不 
允许 左边 有 浮动 对 象 ，【 右 对 齐 】 表 示 不 允许 右边 有 浮动 对 象 ， 【两 者 】 则 表示 两 边 都 不 
允许 有 浮动 对 象 ， 【无 】 表 示 不 限制 浮动 。 


3.2.7 ”定义 边框 样式 


【边框 】 样 式 用 于 定义 页 面 元 素 周 围 的 边框 ， 例 如 边框 的 颜色 、 宽 度 等 。 该 页 面 元 素 
可 以 是 表格 、 图 像 、 文 本 等 ， 如 图 3-14 所 示 。 

用 户 可 通过 【样式 】 下 拉 列 表 框 指定 边框 的 形状 ， 可 以 是 点 划 线 、 虚 线 、 实 线 、 双 线 、 
槽 状 、 桨 状 、 凹 陷 、 凸 出 等 。 通 过 【宽度 】 下 拉 列 表 框 可 以 设置 边框 的 粗细 ， 可 供 选 择 的 
有 细 、 中 、 粗 3 个 选项 ， 用 户 也 可 以 输入 值 自 定 义 。【 颜 色 】 下 拉 列 表 框 用 于 设置 边框 的 
颜色 。 
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图 3-14 边框 样式 效果 


3.2.8 定义 列表 样式 
【列表 】 样 式 用 于 指定 页 面 中 列表 标签 所 定义 的 项 目 列表 的 外 观 显示 , 如 图 3-15 所 示 。 
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全 法 ,在 正式 声 襄 。 圣 闪 站 弗 ,过 秋 、 


半 
: om 
3 ee Wl 6 - 
到 交 估 、 和 时 0 莽 3 
1 ¥ ee 


图 3-15 列表 样式 效果 


图 3-15 中 的 项 目 列表 符号 使 用 的 是 外 部 图 片 ， 用 户 也 可 以 通过 【类 型 】 下 拉 列 表 框 选 
择 Dreamweaver 自 带 的 样式 ， 如 圆 点 、 阿 拉 伯 数字 等 。 在 【位 置 】 下 拉 列 表 框 中 ， 用 户 可 
以 设置 列表 项 是 否 换行 和 缩 进 。 其 中 ，【 外 】 表 示 当 列表 过 长 而 自动 换行 时 以 缩 进 方式 显 
示 ，【 内 】 则 表示 不 缩 进 。 
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3.2.9 定义 定位 样式 
【定位 】 样 式 用 于 对 页 面 中 的 Div( 层 ) 进 行 定位 和 显示 上 的 控制 ， 如 图 3-16 所 示 。 


| 后 相 互 下 应 , 楼 
也 二 二 基本 各 忆 
HE ， 在 整 导 上 
， 和 盐 ， 民 洪 关 区 芒 


轴 洒 看 刁 壕 瑟 局 疯 人 
i 
二 记忆 坑 名 所 记 健 


” 兴 、 守 入 、 
次 
图 3-16 定位 样式 效果 


【类 型 】 下 拉 列 表 框 中 的 选项 用 于 设置 定位 的 方式 ， 使 用 【绝对 】 选 项 可 以 使 用 【 定 
位 】 选 项 组 中 输入 的 坐标 相对 于 页 面 左上 角 来 放置 层 ; 使 用 【相对 】 选 项 可 以 使 用 【定位 】 
选项 组 中 输入 的 坐标 相对 于 对 象 当前 位 置 来 放置 层 ， 使 用 【静态 】 选 项 可 以 将 层 放 在 它 所 
在 文本 中 的 位 置 。 

【显示 】 下 拉 列 表 框 中 的 选项 用 于 设置 层 的 显示 方式 ， 使 用 【继承 】 选 项 可 以 继承 父 
层 的 可 见 属性 ， 如 果 没 有 父 层 ， 则 可 见 ; 使 用 【可 见 】 选 项 将 显示 层 的 内 容 ; 使 用 【隐藏 】 
选项 将 隐藏 层 的 内 容 。 

【溢出 】 下 拉 列 表 框 中 的 选项 用 于 设置 当 层 的 内 容 超出 层 的 大 小 时 的 处 理 方式 ， 使 用 
【可 见 】 选 项 将 使 层 向 右 下 方 扩 展 ， 以 使 所 有 内 容 都 可 见 ， 使 用 【隐藏 】 选 项 将 保持 层 的 
大 小 并 剪辑 任何 超出 的 内 容 ， 使 用 【滚动 】 选 项 将 在 层 中 添加 滚动 条 ， 而 不 论 内 容 是 否 超 
出 层 的 大 小 ;使 用 【自动 】 选 项 ， 则 当 层 的 内 容 超出 层 的 边界 时 才 显 示 滚 动 条 。 

【2Z 轴 】 下 拉 列 表 框 用 于 确定 层 的 堆 县 顺序， 编号 较 高 的 层 显示 在 编号 较 低 的 层 的 上 
面 。 值 可 以 为 正 ， 也 可 以 为 负 。 

【剪辑 ] 选 项 组 用 于 定义 层 的 可 见 部 分 。 如 果 指 定 了 剪辑 区 域 , 则 可 以 通过 脚本 语言 (如 
JavaScript) 来 访问 它 ， 通 过 操作 层 的 属性 来 实现 一 些 特殊 效果 。 


3.2.10 定义 扩展 样式 


【扩展 】 样 式 属性 包括 分 页 、 指 针 和 滤 镜 3 个 选项 。【 分 页 】 选 项 用 于 在 打印 期 间 ， 
在 样式 所 控制 的 对 象 之 前 或 之 后 强行 分 页 ; 【光标 】 下 拉 列 表 框 用 于 设置 光标 的 显示 属性 ， 
当 光 标 位 于 样式 所 控制 的 对 象 上 时 改变 光标 的 视觉 效果 ; 过 滤器 又 称 为 CSS 滤 镜 , 通过 [过 
滤器 】 下 拉 列 表 框 中 的 选项 可 以 对 样式 所 控制 的 对 象 应 用 CSS 滤 镜 ， 以 得 到 对 应 的 特殊 效 
果 。 表 3-1 列 出 了 【光标 】 和 【过 滤器 】 下 拉 列 表 框 中 的 各 选项 及 其 说 明 。 图 3-17 显示 了 
扩展 样式 的 应 用 效果 。 


lso_ 


光标 名称 
crosshair 
text 
wait 
default 
help 


e-resize/w-resize 


ne-resize/sw-resize 


nw-resize/se-resize 


n-resize/s-resize 


。 第 3 章 CSS 基础 知识 。 


中 着 著 落 党 语 本 国 
在 证， 


使 用 等 待 光标 效果 和 水 平 镜像 图 像 滤 镜 
3-17 扩展 样式 效果 


表 3-1 光标 和 滤 镜 效果 名 称 及 说 明 
视觉 效果 效果 说 明 

十 (十 字 准 心 透明 的 渐进 效果 

工 (文字 /编辑 淡 入 淡出 效果 

加 (等 待 ) | -Blur | 风 欧 模糊 的 效果 

辣 ( 系 统 默认 ) 指定 颜色 透明 

[Se (系统 提示 帮助 ) 阴影 效果 

4 (向 右 或 向 左 调整 大 小 ) 水 平 翻转 


ef (向 上 右 或 向 下 左 调整 大 本 站 翻 转 
小 ) 


(向 上 左 或 向 下 右 调整 大 二 
少 ) 
了 (向 上 或 向 下 调整 大 小 ) ”| Gray ”| 彩 图 变 为 灰 度 图 


Light 模拟 光源 效果 


Mask 和 矩形 遮 日 效果 


RevealTrans 动态 效果 


Shadow 轮廓 阴影 效果 


Wave 波浪 扭曲 变形 效果 


注意 : 在 使 用 CSS 滤 镜 时 ， 用 户 还 必须 设置 滤 镜 属性 的 各 个 参数 。 例 如 Glow 滤 镜 就 


Xray 义 光 照片 效果 


包含 两 个 参数 ，color 参数 用 于 确定 发 光 颜 色 ，strength 参数 用 于 确定 发 光 距 离 。 
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3.3 ”应 用 和 管理 CSS 样式 


定义 好 CSS 样式 后 ， 标 签 CSS 样式 和 伪 类 CSS 样式 会 自动 应 用 到 相应 的 XHTML 标 
签 和 伪 类 上 ; 但 对 于 类 CSS 样式 ， 则 需要 手动 将 其 应 用 到 需要 的 网 页 元 素 上 。 如 果 对 CSS 
样式 不 满意 ,用 户 还 可 以 对 CSS 样式 进行 编辑 和 修改 。 可 以 在 页 面 上 导入 使 用 外 部 的 CSS 
样式 ， 或 者 将 页 面 中 的 CSS 样式 导出 以 供 别 的 页 面 使 用 。 


3.3.1 应 用 类 CSS 样式 


对 于 类 CSS 样式 ， 用 户 可 以 通过 以 下 3 种 方式 之 一 ， 将 其 应 用 到 选中 的 网 页 元 素 上 : 

? 在 选中 的 页 面 元 素 上 右 击 ， 从 弹出 的 快捷 菜单 中 选择 【CSS 样式 】 下 要 使 用 的 CSS 
样式 即 可 ， 如 图 3-18 左 图 所 示 。 

? 在 【CSS 样式 】 面 板 中 要 应 用 的 CSS 样式 名 称 上 右 击 ， 从 弹出 的 快捷 菜单 中 选择 
【套用 】 命 令 ， 如 图 3-18 中 间 图 所 示 。 

? 在 网 页 元 素 的 属性 检查 器 的 【样式 】( 或 【类 】) 下 拉 列 表 框 中 选择 要 使 用 的 CSS 样 
式 ， 如 图 3-18 右 图 所 示 。 


Ld] 

[| Em STYL E1 

wm aa STYLE2 

Wa im Hh me Sry 

FM -ing, STYLES PR 

ws 5 和 和 
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汪 UF: 


3-18 ”应 用 类 CSS 样式 


3.3.2 ”修改 CSS 样式 


在 【CSS 样式 】 面 板 中 单 击 【 全 部 】 按 钮 ， 以 显示 当前 页 面 文档 中 用 到 的 所 有 CSS 样 
式 规 则 。 选 中 不 满意 的 CSS 样式 ， 然后 可 以 通过 以 下 两 种 方式 之 一 对 该 样式 进行 修改 : 

? 单 击 【 编 辑 样式 】 按 钮 六， 打开 【CSS 规则 定义 】 对 话 框 ， 可 根据 需要 对 CSS 样 
式 进 行 重新 定义 。 

? 或 者 在 【属性 】 列表 框 中 单 击 需 要 修改 的 属性 值 ， 此 时 系统 会 根据 属性 的 类 别 显 示 
一 个 文本 框 、 下 拉 列 表 框 或 颜色 框 , 在 其 中 输入 或 选择 新 的 属性 值 即 可 ,如 图 3-19 
所 示 。 如 果 需 要 添加 新 的 属性 ， 可 单 击 【 添 加 属性 】 链接， 使 其 变 成 一 个 下 拉 列 表 
框 ， 在 其 中 选择 需要 的 属性 ， 然 后 设置 值 ， 如 图 3-20 所 示 。 要 删除 某 个 属性 ， 选 
中 后 直接 按 Delete 键 即 可 。 


。 第 3 章 CSS 基础 知识 。 


eoloi 
order-left-style 
order-1eft-width 


图 3-19 修改 CSS 样式 的 属性 值 ” 图 3-20 向 CSS 样式 中 添加 属性 


3.3.3 删除 CSS 样式 


可 以 将 未 使 用 的 或 无 效 的 CSS 样式 删除 。 在 【CSS 样式 】 面 板 中 选择 要 删除 的 CSS 
样式 ， 单 击 【 删 除 CSS 规则 】 按 钮 亚 |， 即 可 删除 该 CSS 样式 。 


3.3.4 ”链接 或 导入 外 部 CSS 样式 表 文 件 


可 以 在 页 面 中 附加 或 链接 外 部 的 CSS 样式 表 文 件 , 则 页 面 中 的 网 页 元 素 将 全 部 更 新 以 
反映 该 样式 。 用 户 可 以 将 创建 的 或 复制 到 站 点 中 的 任何 样式 表 附 加 到 页 面 上 ， 也 可 以 使 用 
Dreamweaver 附带 的 预 置 样式 表 ， 它 们 可 以 自动 移入 站 点 并 附加 到 页 面 上 。 

在 【CSS 样式 】 面 板 中 单 击 【 附 加 样式 表 】 按钮 和 ,打开 【链接 外 部 样式 表 】 对 话 框 ， 
如 图 3-21 所 示 。 在 【文件 /URL】 下 拉 列 表 框 中 输入 外 部 样式 表 文 件 的 路 径 和 名 称 ， 或 单 
击 右 侧 的 【浏览 】 按 钮 ， 在 打开 的 对 话 框 中 选择 要 使 用 的 外 部 样式 表 文 件 。 

要 在 页 面 中 使 用 外 部 的 CSS 样式 表 ， 有 两 种 方式 : 链接 和 导入 。 对 于 链接 到 页 面 中 的 
CSS 样式 表 ， 系 统 会 自动 在 页 面 代码 中 创建 一 个 link href 标签 ， 并 链接 到 使 用 的 外 部 样式 
表 上 。 


<link href="Level3 1.css" rel="stylesheet" type="text/css"/> 


这 种 方法 的 优点 是 : 可 以 将 要 套用 相同 样式 规则 的 页 面 都 指定 到 同一 个 样式 文件 ， 以 
进行 统一 的 修改 ， 这 样 也 便于 设置 统一 的 风格 。 
导入 方式 与 链接 方式 相似 ， 但 必须 放 在 标签 “<STYLE>” 和 和 “</STYLE>” 中 : 


<style type="text/css"> 

Ct Url(tvaain css hy 

导入 方式 的 优点 在 于 ， 可 以 灵活 地 引入 CSS 文件 对 XHTML 元 素 进行 控制 。 链 接 方 式 
和 导入 方式 的 相同 点 在 于 ， 都 是 将 样式 表 以 单独 的 文件 存放 ; 不 同 点 在 于 ， 链 接 外 部 样式 
表 是 将 样式 表 以 <link> 标 记 链 接 插入 网 页 中 (整体 ), 而 导入 外 部 样式 表 则 是 将 样式 表 插 入 内 
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部 样式 表 的 <style> 区 域内 (局 部 )， 并 使 用 @import 声明 , 且 @import 声明 必须 在 样式 表 定义 


的 开始 部 分 ， 其 他 样式 定义 在 后 。 
提示 : 链接 方式 的 优先 级 高 于 导入 方式 ， 网 页 一 般 都 使 用 链接 方式 。 


Dreamweaver 还 提供 了 一 些 内 置 的 样式 表 文 件 , 单 击 【 范 例 样式 表 】 链接 , 可 打开 【 范 
例 样 式 表 】 对 话 框 ， 如 图 3-22 所 示 。 您 可 以 在 其 中 选择 一 种 样式 并 预览 ， 满 意 了 可 以 单 击 


【确定 】 按 钮 ， 即 可 将 其 链接 到 当前 页 面 中 。 


my Iavimeimav Imavim Cw 
t 
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图 3-21 【链接 外 部 样式 表 】 对 话 框 3-22 【范例 样式 表 】 对 话 框 


本 章 小 结 


CSS 是 最 重要 的 Web 标准 之 一 , 已 经 为 业内 所 认可 ,当前 许多 流行 网 站 都 是 通过 CSS 
来 实现 页 面 显示 的 。 本 章 首先 概述 了 Web 标准 的 基本 概念 ， 然 后 详细 介绍 了 CSS 的 知识 
点 ， 包 括 如 何 创建 、 应 用 和 管理 CSS 样式 等 。 掌 握 这 些 知识 ， 是 大 家 进行 网 页 设计 和 深入 


学 习 CSS 的 基础 ， 是 每 一 个 网 页 制作 人 员 的 必 备 技能 。 
习题 


填空 题 

1. Web 标准 主要 分 为 3 个 标准 集 : 结构 标准 主要 是 和 ， 表 现 标准 主要 是 ， 
为 标准 主要 是 

. 真正 符合 Web 标准 的 网 页 设计 能 够 实现 网 页 和 

. CSS 的 语法 结构 由 3 部 分 组 成 : 和 

. 区 块 是 指 页 面 中 的 文本 、 图 像 和 等 蔡 代 元 素 。 

. 过 滤器 又 称 为 ， 可 以 对 样式 所 控制 的 对 象 应 用 CSS 滤 镜 ， 以 得 到 对 应 的 特殊 效果 。 

. 定义 好 CSS 样式 后 ， 标 签 CSS 样式 和 伪 类 CSS 样式 会 自动 应 用 到 相应 的 XHTML 标签 和 伪 类 上 ; 
对 于 CSS 样式 ， 则 需要 手动 将 其 应 用 到 需要 的 网 页 元 素 上 。 


的 分 离 。 


Qo wm hb 


7. 对 于 链接 到 页 面 中 的 CSS 样式 表 ， 系 统 会 自动 在 页 面 代 码 中 创建 一 个 标签 , 并 链接 到 使 用 


外 部 样式 表 上 。 


|s4 


但 


I 


选择 题 

8.( ”) 用 于 对 网 页 中 的 信息 进行 整理 和 分 类 。 
A. 结构 B. 表现 C. 行为 

9. 要 对 页 面 中 的 DIV( 层 ) 进 行 定位 和 显示 上 的 控制 ， 应 对 其 设置 ( ”) 样 式 。 
A. 区 块 B. 方 框 C. 定位 D. 扩展 

简 答 题 


10. 什么 是 Web 标准 ? CSS 在 其 中 充当 什么 角色 ? 
11. 链接 和 导入 外 部 CSS 样式 表 有 什么 区 别 ? 


。 第 3 章 CSS 基础 知识 。 
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使 用 CSS+Div 布局 页 面 
本 章 介 绍 使 用 CSS+Div 进行 网 页 布局 的 过 程 和 方法 。 通过 本 章 的 学 习 ， 应 该 完成 以 下 
学 习 目 标 : 
WY 了 解 使 用 CSS+Div 和 使 用 表格 布局 页 面 的 区 别 
掌握 对 页 面 中 插入 的 Div 标签 应 用 CSS 样式 的 方法 
ff 学 会 在 网 页 中 添加 文本 和 图 像 占 位 符 
YY 学 会 将 CSS 样式 导出 到 一 个 外 部 样式 表 
fy 学 会 使 用 标尺 和 辅助 线 微调 布局 
ff 了 解 AP Div 并 掌握 其 基本 操作 


4.1 创建 Div 元 素 样式 的 页 面 布 局 


对 于 现代 的 网 页 设计 来 说 ， 都 是 采用 以 CSS 为 基础 的 布局 。 国 内 许多 知名 网 站 都 纷纷 
进行 了 CSS+Div 改造 ， 如 阿里 巴巴 、 当 当 网 等 。 业 内 也 越 来 越 关注 CSS+Div 的 标准 化 设 
计 ， 当 前 ， 网 页 设计 人 员 已 经 把 这 一 要 求 作为 行业 标准 。 

4.1.1 与 表格 布局 方式 的 比较 


一 个 以 CSS 为 基础 的 页 面 布局 包括 两 大 部 分 : 一 系列 CSS 样式 (定义 页 面 元 素 的 显示 
外 观 ) 和 与 其 对 应 的 一 系列 XHTML 标签 (典型 代表 是 Div 标签 ， 它 是 形成 页 面 的 基础 )。 与 
传统 的 以 表格 为 基础 的 布局 相 比 ，CSS 布局 更 符合 Web 标准 ， 满 足 工业 需求 。 
? 由 于 采用 CSS 布局 ， 页 面 中 不 像 表 格 布局 那样 页 面 内 容 和 表格 样式 、 属 性 代码 混 
杂 在 一 起 。 页 面 的 代码 结构 更 加 清晰 ， 而 且 CSS 样式 可 以 以 CSS 样式 文件 形式 链 
接 到 页 面 中 , 实现 了 样式 和 结构 的 分 离 ， 从 而 极 大 地 缩减 了 页 面 代码 , 提高 了 页 面 
浏览 速度 ， 同 时 也 使 得 页 面 结构 的 重 构 性 增强 了 。 
? 结构 清晰 。 对 搜索 引擎 更 加 友好 ， 更 容易 被 搜索 引擎 收录 ， 有 具备 SEO( 搜 索引 擎 优 
化 ) 的 先天 条 件 ， 配 合 优秀 的 内 容 和 一 些 SEO 处 理 ， 可 以 获得 更 好 的 网 站 排名 。 
? 兼容 性 更 好 。 可 以 在 几乎 所 有 的 浏览 器 上 使 用 , 不 会 出 现在 不 同 浏览 器 上 效果 差距 
很 大 的 情况 。 
? 易于 维护 。 由 于 网 站 的 布局 通过 CSS 文件 来 控制 ， 只 需 修改 CSS 文件 即 可 对 网 站 
的 整体 风格 进行 更 新 。 


， 第 4 章 ”使 用 CSS+Div 布局 页 面 。 


? 更 加 易 用 。 使 用 CSS 可 以 结构 化 HTML, 例如 p 标签 只 用 来 控制 段落 ，h1-h6 标签 
只 用 来 控制 标题 ，table 标签 只 用 来 表现 格式 化 的 数据 等 。 

? 更 好 的 扩展 性 。 用 户 的 设计 不 仅 可 以 用 于 Web 浏览 器 ， 还 可 以 用 到 其 他 设备 上 ， 
如 PowerPoint。 

? 能 更 灵活 地 控制 页 面 布局 。 通 常情 况 下 ， 页 面 的 下 载 是 按照 代码 的 排列 顺序 ， 而 表 
格 布局 代码 的 排列 顺序 是 从 上 向 下 、 从 左 到 右 ， 无 法 改变 。 而 通过 CSS 控制 ， 用 
户 可 以 任意 改变 代码 的 排列 顺序 ， 比 如 将 重要 的 右边 内 容 先 加 载 出 来 。 


4.1.2 ”预览 要 完成 的 页 面 布局 


下 面 将 创建 本 书 第 2 章 在 讲解 文本 和 图 像 时 所 基于 的 页 面 布局 ， 如 图 4-1 所 示 。 
FASH10N 时 尚 生活 Fie SH E 


种、 及 站 下 特 吉 ， 
芭 坷 30 志和 有 了 15。 了 作 直 订 站 
全 但 季 的 了 本 下 ， 到 其 由 万 站 可 休 理 
3- 切 避 宣 加 在 间 器 栈 、 


加 有 本 2009 


图 4-1 要 完成 的 页 面 布局 效果 


从 整体 上 看 ， 页 面 主要 由 顶部、 中 间 、 底 部 这 3 个 区 域 组 成 。 其 中 ， 中 间 区 域 又 划分 
成 了 左 、 中 、 右 3 个 部 分 。 这 是 一 种 典型 的 “三 ”型 页 面 结构 ， 通 常 在 顶部 显示 页 面 logo 
和 导航 ， 中 间 部 分 显示 主要 内 容 ， 而 底部 显示 版 权 信息 。 


4.1.3 创建 页 面 并 定义 body 标签 样式 


下 面 从 一 个 空白 的 HTML 页 面 开 始 ， 来 设计 图 4-1 所 示 的 页 面 布局 。 创 建 了 页 面 文档 
后 ， 我 们 首先 来 定义 body 标签 ， 以 保证 页 面 中 的 文本 都 默认 使 用 一 致 的 外 观 。 

例 4-1 新 建 空白 HIML 页 面 并 定义 其 body 标签 样式 。 

各 选择 【文件 】 | 【新 建 】 命 令 ， 打开 【新 建文 档 】 对 话 框 。 选 择 【 空 白 页 】 选 项 ， 
在 【页 面 类 型 】 列 表 框 中 选择 【HTML】 类 型 ， 在 【布局 】 列 表 框 中 选择 【无 】 选 项 。 单 
击 【 创 建 】 按 钮 ， 即 可 创建 一 个 空白 的 HTML 页面 。 

加 【文档 】 窗 口 默认 打开 的 是 【设计 】 视 图 ， 由 于 创建 的 是 空白 页 面 ， 因 而 【设计 】 
视图 中 显示 的 是 一 片 空白 。 切 换 到 【代码 】 视 图 ， 可 以 查看 HTML 文档 的 代码 结构 ， 如 图 
4-2 所 示 。 
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提示 : HTML 标签 都 是 成 对 出 现 的 , 如 <tite> 和 </title>; 而 且 是 可 以 嵌 套 的 , 如 <html> 
和 </html>。<head> 标 签 是 文档 头 ， 通 常 包含 CSS 样式 的 定义 或 链接 信息 。<title> 标 签 控 
制 页 面 的 标题 ，<body> 标 签 则 是 页 面 的 主体 。 关 于 HTML 的 常用 标签 及 说 明 ， 读 者 可 参 
阅 附录 B。 


TREE ES 
全 轩 bs . ee 
| 5 BE ， [3 by 


<!DOCTYPE html PUBLIC *-//W3C//DID XHTML 1.0 Transitior ae 
aesp/ /ee org /TR/xhen! /oo /xhenlt eranat Eton nal.d 


> 
<mera http-equiv="Content-Type” content="text/html; charset=utf-8" / 


图 4-2 创建 的 空白 HTML 文档 


加 选择 【文件 】 | 【保存 】 命 令 ， 打开 【 另 存 为 】 对 话 框 。 在 【文件 名 】 文 本 框 中 输 
入 “layout”， 在 【保存 类 型 】 下 拉 列 表 框 中 选择 【HTML 文档 】 选 项 ， 如 图 4-3 所 示 , 单 
击 【 保 存 】 按 钮 。 

@@ 在 【文档 】 工 具 栏 的 【标题 】 文 本 框 中 清除 原 有 内 容 ， 并 输入 “时 尚 生活 ”作为 页 
面 的 标题 。 

人 @ 展开 【CSS 样式 】 面 板 ， 单 击 【 全 部 】 按 钮 切换 到 【全 部 】 模 式 。 由 于 是 从 空白 
的 HTML 页 面 开始 ， 所 以 【所 有 规则 】 列 表 框 中 会 提示 没有 定义 任何 CSS 样式 。 在 面板 
的 底部 单 击 【新 建 CSS 规则 】 按 钮 电 ， 打 开 【 新 建 CSS 规则 】 对 话 框 。 

人 @ 选择 【标签 】 选 项, 在 【标签 1 文本 框 中 输入 “body”。 选 择 【 仅 限 该 文档 】 选 项 ， 
将 规则 保存 在 页 面 中 ， 如 图 4-4 所 示 ， 单 击 【 确 定 】 按 钮 。 

人 @ 打开 【CSS 规则 定义 】 对 话 框 ， 在 【分 类 】 列 表 框 中 单 击 【类 型 】 选 项 。 将 【 字 
体 】 设 置 为 【Arial，Helvetica，sans-serif】〗 ,将 【大 小 】〗 设 置 为 【中 】， 如 图 4-5 所 示 。 


和 wie [ce | 
可 | 3 | 
» | 渤 开 时 色 对 : 

J 和 
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帮主 二 
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规 寄 实 交 
| 二 理 守 人 黄 肌 的 人 委 ， 
| 5 加 | Ce 
图 4-3 保存 页 面 文 档 图 4-4 新 建 CSS 规则 


全 在 [分 类 】 列 表 框 中 单 击 【背景 ] 选项 。 单 击 【 浏 览 】 按 钮 ,选择 图 4-6 中 所 示 的 
图 片 ， 将 【重复 】 方 式 设置 为 【重复 】， 单 击 【确定 】 按 钮 。 


lsa_ 
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和 


图 4-5 定义 body 标签 的 字体 样式 图 4-6 定义 body 标签 的 背景 样式 


注意 : 为 了 使 页 面 与 旧版 本 的 浏览 器 兼容 ,您 可 以 在 【分 类 】〗 列 表 框 中 选择 【区 块 】 
选项 ， 然 后 将 【文本 对 齐 】〗 参 数 设 置 为 【居中 】〗， 以 确保 页 面 将 始终 居中 显示 在 访客 的 浏 
览 器 中 。 

和 @ 按 Ctrlts 键 对 修改 进行 保存 。 此 时 【文档 】 和 窗口 如 图 4-7 所 示 。 在 【代码 】 视 图 
下 ， 我 们 可 以 发 现 ， 定 义 的 CSS 样式 保存 在 <head> 标 签 中 。 


FT 
rm am we NM: 
0 三味 四 号 驴 人 
了 下 


图 4-7 body 样式 的 代码 与 效果 


注意 : 通常 情况 下 , 网 页 设计 人 员 都 是 在 网 页 文档 的 <head> 中 定义 页 面 的 CSS 布局 规 
则 。 设 计 工 作 完成 之 后 ， 再 将 规则 导出 到 一 个 外 部 样式 表 中 。 


4.1.4 定义 外 部 容器 


创建 以 CSS 为 基础 的 布局 的 一 个 标准 技术 , 就 是 使 用 一 个 包含 其 他 所 有 标签 及 内 容 的 
Div 标签 ， 以 便 为 建立 全 局 设置 (如 页 面 的 总 体 宽度 和 布局 对 齐 ) 定 义 一 个 CSS 规则 。 下 面 
基于 例 4-1 来 定义 该 CSS 规则 ， 并 插入 与 之 关联 的 Div 标签 。 

例 4-2 对 页 面 进行 全 局 的 布局 设置 。 

入 继续 例 4-1， 在 【CSS 样式 】 面 板 中 单 击 【新 建 CSS 规则 】 按 钮 ， 打 开 【 新 建 CSS 
规则 】 对 话 框 。 选 择 【ID】? 选 项 ， 在 【选择 器 】 文 本 框 中 输入 “#container”。 选 择 【 仪 限 
该 文档 】 选 项 ， 如 图 4-8 所 示 。 

提示 : # 稼 示 这 是 一 种 ID 选择 器 ， 读 者 可 参阅 附录 A。 

加 单 击 【 确 定 】 按 钮 ， 打 开 【CSS 规则 定义 】 对 话 框 。 在 【分 类 】 列 表 框 中 选择 【区 
块 〗 选 项 ,将 【文本 对 齐 】 方 式 设置 为 【 左 对 齐 】， 如 图 4-9 所 示 。 这 样 一 来 ， 最 终 设 置 
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在 container Div 标签 中 的 所 有 元 素 都 将 是 左 对 齐 的 。 


[oem ”| 
| ey i = | 
下 再 国 世 大 : 
a x en. 
和 1 
er 了 GT 
二 
< Ni ~ 共 面 村 漠 人 7) 
L = | 了 对齐， 到 对齐 
图 4-8 定义 页 面 外 部 容器 的 CSS 规则 图 4-9 设置 容器 内 元 素 的 对 齐 方式 


注意 : 虽然 body 标签 的 样式 规则 将 文本 对 齐 设置 为 居中 ， 但 这 是 针对 整个 页 面 在 浏 
览 器 中 的 显示 位 置 而 言 。 如 果 container 标签 有 自己 的 规则 定义 ， 那 么 其 所 包含 的 元 素 将 
按照 container 标签 的 样式 规则 来 显示 。 

加 在 【分 类 】 列 表 框 中 单 击 【 方 框 】 选 项 ， 将 【 宽 】 设 置 为 760 像素 。 在 【边界 】 区 
域 禁 用 【全 部 相同 】 复 选 框 ; 设置 【上 ]】 为 0 像素 ，【 右 】 为 自动 , 【下 】 为 0 像素, 【 左 】 
为 自动 ， 如 图 4-10 所 示 。 

提示 : 步骤 人 @@ 将 页 面 的 宽度 设置 为 760 像素 ， 通 常情 况 下 按照 800X 600 的 大 小 来 设 
计 网 页 。 额外 的 40 像素 用 来 显示 页 面 的 滚动 条 。container 标签 的 左右 边框 被 设置 为 自动 ， 
是 为 了 使 标签 中 包含 的 页 面 内 容 能 够 居中 显示 。 如 果 浏 览 器 的 窗口 比 设置 的 宽度 大 ， 那 么 
多 出 的 部 分 将 会 被 划分 ， 并 自动 平均 应 用 于 左右 边框 ， 这 样 就 确保 页 面 可 以 在 1024X768 
或 更 大 浏览 器 上 正常 显示 。 

人 @ 下 面 来 插入 与 上 述 CSS 规则 相关 联 的 Div 标签 。 在 【插入 】 面 板 的 【布局 】 类 别 
中 单 击 【 插 入 Div 标签 】 按 铀 加 ,打开 【插入 Div 标签 】 对 话 框 。 将 插入 位 置 设置 为 【在 
插入 点 〗】， 从 【ID】〗 下 拉 列 表 中 选择 container， 如 图 4-11 所 示 。 


图 4-10 定义 容器 的 大 小 图 4-11 插入 Div 标签 
人 单 击 【确定 】 按 钮 ，Dreamweaver 便 将 新 的 Div 标签 添加 到 了 页 面 上 ， 占 位 符 内 容 


显示 为 “此 处 显示 这 “container” 的 内 容 ”， 且 container 标签 位 于 【文档 】 窗 口 的 居中 位 
置 ， 如 图 4-12 所 示 。 
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图 4-12 插入 的 container 标签 
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提示 : 如 果 container 标签 周围 没有 显示 边框 ， 那 么 可 以 从 文档 工具 栏 上 的 【可 视 化 
助理 】 下 拉 菜 单 中 单 击 【CSS 布局 外 框 】 选 项 。 

人 @ 将 【文档 】 窗 口 切换 到 【代码 】 视 图 ， 可 以 查看 添加 的 container 标签 的 定义 代码 ， 
位 于 标签 <body> 和 </body> 之 间 ， 如 下 所 示 : 

<body> 


<div id="container"> 此 处 显示 id "container" 的 内 容 </div> 
</body> 


4.1.5 设计 项 部 布局 


从 图 4-1 中 可 以 发 现 ， 页 面 顶部 可 划分 为 两 个 部 分 : 左 侧 部 分 和 右 侧 部 分 。 左 侧 部 分 
显示 标题 “FASHION 时 尚 生活 ”， 右 侧 部 分 显示 文本 “服饰 搭配 与 礼仪 ”。 

例 4-3 ”设计 页 面 顶部 布局 。 

六 继续 例 4-2。 在 【CSS 样式 】 面 板 中 单 击 【新建 CSS 规则 】 按 钮 ， 打 开 【 新 建 CSS 
规则 】 对 话 框 。 选 择 【ID】 选 项 ， 在 【选择 器 】 文 本 框 中 输入 “#top”; 选择 【 仅 限 该 文 
档 】 选 项 ， 如 图 4-13 左 图 所 示 。 

加 单 击 【 确 定 】 按 钮 , 打开 【CSS 规则 定义 】 对 话 框 。 将 【 方 框 】 样 式 设置 为 : 【 宽 】 
为 760 像素 ，【 高 】 为 38 像素 ，【 上】 为 0 像素 ，【 右 】 为 自动 ，【 下 】 为 0 像素 ，【 左 】 


为 自动 ， 如 图 4-13 右 图 所 示 。 然 后 单 击 【 确 定 】 按 钮 。 
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4-13 ”定义 #top 样式 规则 


和 用 同样 的 方法 定义 #topl 和 #top2 样式 规则 ， 如 图 4-14 所 示 。 
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4-14 ”定义 #topl 和 #top2 样式 规则 
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从 下 面 在 页 面 中 插入 与 #top、#topl1、#top2 样式 规则 相对 应 的 Div 标签 。 将 【文档 】 
窗口 切换 到 【 拆 分 】 视 图 , 将 光标 定位 到 container 标签 的 结束 标签 之 前 ， 即 </div> 的 前 面 ， 
如 图 4-15 所 示 。 

加 在 【插入 】 面 板 的 【布局 】 类 别 中 单 击 【 插 入 Div 标签 】 按 钮 ， 打开 【插入 Div 
标签 】 对 话 框 。 选 择 插入 位 置 为 【在 插入 点 】， 在 【ID】? 下 拉 列 表 中 选择 ttp， 如 图 4-16 
所 示 。 


图 4-15 插入 top 标签 图 4-16 选择 插入 top 标签 的 参数 


提示 : 在 【 拆 分 】 视 图 下 ， 我 们 可 以 在 上 面 的 代码 视图 中 精确 定位 要 插入 网 页 对 象 的 
位 置 ， 然 后 在 下 面 的 设计 视图 中 观看 插入 后 的 效果 。 在 网 页 设计 过 程 中 ， 这 是 一 种 避免 出 
错 的 十 分 有 效 的 方法 。 

名 单 击 【 确 定 】 按 钮 ， 新 添加 的 Div 标签 将 显示 在 container 标签 中 ， 并 显示 占 位 符 
信息 “此 处 显示 id "top" 的 内 容 ”。 

各 在 代码 视图 中 将 光标 定位 到 top 标签 的 结束 标签 </div> 之 前 。 在 【插入 】 面 板 的 【 布 
局 】 类 别 中 单 击 【 插 入 Div 标签 】 按 钮 ， 打 开 【 插 入 Div 标签 】 对 话 框 。 选 择 插 入 位 置 为 

【在 插入 点 】, 在 【ID】〗 下 拉 列 表 框 中 选择 topl。 

人 @ 在 代码 视图 中 重新 将 光标 定位 到 top 标签 的 结束 标签 之 前 , 用 同步 怠 食 的 方法 插入 
Div 标签 top2。 删 除 标签 top1 的 文字 占 位 符 内 容 ， 从 而 完成 页 面 顶部 的 布局 设计 。 设 计 视 
图 中 的 效果 如 图 4-17 所 示 。 


炽 踊 SS rr mE 


图 4-17 完成 页 面 顶部 的 布局 


人 @ 下 面 来 对 topl 标签 中 的 标题 样式 进行 设置 。 在 设计 视图 中 清除 标签 topl 的 文本 占 
位 符 内 容 ， 并 输入 “FASHION 时 尚 生活 ”。 选 中 文字 “FASHION”， 在 属性 检查 器 中 将 
【字体 】 设 置 为 黑体 ，【 大 小 】 设 置 为 36，【 粗 细 】 为 粗 体 ，【 颜 色 】 为 丁 F9900， 如 图 
4-18 所 示 。Dreamweaver 自动 将 用 户 的 设置 保存 为 命名 为 stylel 的 类 CSS 样式 。 


[Eee Cum) er, Ah Ee 


CR | 
4-18 定义 topl 标签 中 的 标题 文本 样式 


。 第 4 章 使 用 CSS+Div 布局 页 面 。 


克 用 同步 又 各 所 示 的 方法 定义 命名 为 “时 尚 生活 ”的 文字 设置 格式 ，【 字 体 】 为 黑 
体 ，【 大 小 】 为 26，【 粗 细 】 为 粗 体 ，【 颜 色 】 为 拓 F66CC。Dreamweaver 自动 将 该 设置 
保存 为 命名 为 style2 的 类 CSS 样式 。 

轨 在 设计 视图 中 清除 标签 top2 的 文本 占 位 符 内 容 ,并 输入 文本 “服饰 搭配 与 礼仪 ”， 
清除 container 标签 的 文本 占 位 符 ， 此 时 页 面 顶部 效果 如 图 4-19 所 示 。 


FASH HON 时 尚 生活 ”vw ”vw ”wv ”vv 山本 仅 
图 4-19 页 面 项 部 最 终 效 果 


4.1.6 设计 水 平 线 样式 


观察 图 4-1， 页 面 顶部 与 中 间 内 容 之 间 ， 以 及 中 间 内 容 和 底部 之 间 分 别 有 一 条 水 平 线 ， 
本 节 介 绍 如 何 设 计 水 平 线 的 样式 并 在 页 面 中 设计 水 平 线 的 布局 。 

例 4-4 设计 并 在 页 面 中 使 用 水 平 线 。 

人 @ 继续 例 4-3。 在 【 拆 分 】 视 图 的 代码 编辑 器 下 , 在 定义 CSS 样式 的 部 分 新 定义 “line 
hr” 类 CSS 样式 , 如 图 4-20 所 示 。 代 码 的 意思 是 , 将 所 有 class 属性 为 line 的 标签 下 的 hr( 水 
平 线 ) 填 充 颜 色 设置 为 粉红 色 。 

@@ 将 光标 定位 到 container 标签 的 结束 标签 之 前 ， 在 【插入 】 面 板 的 【布局 】 类 别 中 
单 击 【插入 Div 标签 】 按 钮 , 打开 【插入 Div 标签 】 对 话 框 。 选择 插入 位 置 为 【在 插入 点 】， 
在 【class】 下 拉 列 表 框 中 输入 line， 如 图 4-21 所 示 。 


图 4-20 定义 水 平 线 样式 图 4-21 在 页 面 中 插入 容纳 水 平 线 的 Div 容器 


各 单 击 【确定 】 按 钮 ， 在 代码 编辑 器 中 将 光标 置 于 新 添加 的 line 标签 的 结束 标签 之 
前 。 然 后 选择 【插入 】|【HTML]|【 水 平 线 】 命 令 ， 得 到 效果 如 图 4-22 所 示 。 

您 用 同样 的 方法 在 页 面 中 添加 页 面 中 间 部 分 和 底部 之 间 的 水 平 线 ,得 到 效果 如 图 4-23 
所 示 。 


图 4-22 水平线 及 其 样式 效果 图 4-23 制作 另外 一 条 水 平 线 
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注意 : 细心 的 读者 可 能 发 现 ， 这 两 条 水 平 线 的 生成 代码 是 完全 一 样 的 ， 它 们 也 使 用 同 
样 的 样式 规则 ， 因 而 直接 对 代码 进行 复制 、 粘 贴 即 可 ， 而 不 必 重 复 步 怠 佑 和 全 的 操作 。 可 
以 通过 其 所 在 Div 容器 的 id 属性 加 以 区 别 ， 用 户 只 需 在 class 属性 后 添加 诸如 “id="hr1"” 
这 样 的 代码 即 可 。 


4.1.7 设计 中 间 布 局 


页 面 的 中 间 部 分 用 于 承载 页 面 的 主要 内 容 ， 它 分 为 左 、 中 、 右 3 个 区 域 。 这 里 首先 设 
计 承 载 页 面 中 间 部 分 的 容器 content， 然 后 在 其 中 嵌 套 3 个 Div 标签 ， 分 别 为 left、middle 
和 right， 用 于 将 content 区 域 进行 划分 。 
例 4-5 设计 并 布局 页 面 中 间 区 域 。 
名 继续 例 4-4。 首 先 来 定义 #content 样式 规则 ， 如 图 4-24 所 示 。 
站 3 
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北 坪 拆 宫 吾 放 本 用 天 所 用 于 
所 月 TD 方 "crntent 的 )TRL 元 过。 


图 4-24 定义 #content 样式 规则 


@@ 接 下 来 定义 吉 eft 样式 规则 ， 如 图 4-25 所 示 。 将 【定位 】 样 式 的 〖【 左 〗】、【 右 】 剪 
辑 设置 为 5 像素 ， 是 为 了 使 容器 中 的 文本 与 边界 之 间 有 一 定 的 间隙 ， 从 而 使 页 面 不 显得 杂 
乱 而 更 有 条 理性 。 


4-25 ”定义 要 eft 样式 规则 


。 第 4 章 使 用 CSS+Div 布局 页 面 。 


介 下 面 来 定义 #middle 和 #right 样式 规则 , 如 图 4-26 所 示 。 为 了 使 right 容器 中 的 页 面 
元 素 与 容器 边界 之 间 有 一 定 的 间隙 , 在 定义 芒 ight 样式 规则 时 , 还 需 将 【定位 】 样 式 的 【 右 】 
剪辑 设置 为 $ 像素 。 


4-26 ”定义 #middle 和 #right 样式 规则 


@@ 下 面 来 插入 与 术 eft、#middle 和 #ight 样式 规则 相对 应 的 Div 标签 。 在 【 拆 分 】 视 
图 下 ， 将 光标 置 于 代码 编辑 器 中 第 一 个 水 平 线 所 在 Div 标签 的 结束 标签 后 ， 在 【插入 】 画 
板 的 【布局 】 类 别 中 单 击 【 插 入 Div 标签 】 按 钮 ， 打 开 【 插 入 Div 标签 】 对 话 框 。 选 择 插 
入 位 置 为 【在 插入 点 】〗， 在 【id】 下 拉 列 表 框 中 选择 content， 如 图 4-27 所 示 。 


4-28 ”插入 content 标签 后 的 效果 


加 将 光标 置 于 content 结束 标签 之 前 按 步 怠 傅 所 示 的 方法 插入 left、middle 和 right 
标签 。 完 成 后 的 代码 如 图 4-29 所 示 。 删 除 这 些 标签 的 文本 占 位 符 内 容 , 完成 页 面 中 部 的 布 
局 ， 按 F12 键 后 页 面 的 预览 效果 如 图 4-30 所 示 。 
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FASH LON 时 尚 生活 服 计 撕 醒 与 礼仪 


CoIFIixCrr"> 服 讳 指 配 与 礼仪 </span> 


4-29 ”插入 left、middle 和 right 标签 图 4-30 页 面 预览 效果 


注意 : Div 标签 的 插入 点 十 分 重要 ， 如 果 光 标定 位 的 插入 点 不 对 ， 则 可 能 会 得 到 不 符 
合 预期 效果 的 页 面 布局 。 

加 将 光标 定位 到 left 标签 , 输入 图 4-1 左 侧 所 示 的 文本 内 容 , 然后 按 Shift+Enter 键 换 

。 在 【插入 】 面 板 的 【常用 】 类 别 中 单 击 【 图 像 占 位 符 】 按 钮 ， 打 开 【 图 像 占 位 符 】 对 
a 输入 要 使 用 图 像 的 宽度 和 高 度 ， 然 后 单 击 【确定 】 按 钮 ， 即 可 在 页 面 中 插入 图 像 占 
位 符 ， 如 图 4-31 所 示 。 


人 情意 其 汪 入 祥 性 ，Pjj, 注意 着 站 也 
是 码 个 种 北 成 功 害 的 基本 素养 。 着 装 朱 现 
于， 际 了 吕 刘 、 可 完好 ， 还 让 网， 
时 六 是 以 下 原 刚 。 


CQ14x 330) 


4-31 在 left 标签 中 插入 图 像 占 位 符 


人 @ 用 同样 的 方法 在 middle 标签 中 也 插入 图 像 占 位 符 , 大 小 为 181X 516 像素 。 在 right 
标签 中 输入 图 4-1 有 科 的 联 守 列 家 内 和 ， 如 图 4-32 所 示 。 
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图 4-32 在 right 标签 中 输入 列表 内 容 


和 @ 第 一 级 项 目 列表 默认 使 用 的 是 阿拉 伯 数 字 , 如 果 想 使 用 和 图 4-1 所 示 一 样 的 图 片 作 
为 项 目 列表 符号 ,可 以 通过 修改 right 标签 的 样式 定义 规则 来 完成 。 在 【CSS 样式 】 面 板 中 
选中 “#ight” 样 式 规则 ， 然 后 单 击 【编辑 CSS 规则 】 按 钮 ， 打 开 【CSS 规则 定义 】 对 话 


lee_ 


*。 第 4 章 ”使 用 CSS+Div 布局 页 面 。 


框 。 修 改 【列表 】 样 式 ， 使 用 图 4-1 中 所 示 的 小 图 片 作为 项 目 符号 即 可 ， 如 图 4-33 所 示 。 
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图 4-33 ”修改 #ight 样式 规则 
和 @ 在 代码 编辑 器 中 将 光标 置 于 right 标签 的 结束 标签 前 ， 在 【插入 】 面 板 的 【常用 】 


类 别 中 单 击 【表格 】〗】 按 钮 ， 打 开 【 表 格 】 对 话 框 。 将 【 行 数 】 设 置 为 1，【 列 数 】 设 置 为 
2，【 页 眉 】 使 用 【无 】 样 式 ， 如 图 4-34 左 图 所 示 。 

人 @ 单 击 【 确 定 】 按 钮 ， 即 可 在 right 标签 的 项 目 列表 段落 下 插入 一 个 一 行 两 列 的 表格 。 
拖 动 表格 边缘 的 控制 点 ， 将 其 调整 成 图 4-34 右 图 所 示 的 大 小 。 


-mn 
未 恪守 应 : Eo | | 着 知 此 击 [x] 
节 IE 拒 妇 : |。 | 识 某 
站 元 fi5E:| | 


有 
短 的 闻 提 下 在 某 此 方 可 人 与 站 同 


Be sD 


4-34 在 right 标签 中 插入 表格 


和 大 分 别 将 光标 置 于 表格 的 两 个 单元 格 中 , 插入 图 像 占 位 符 , 最 后 完成 页 面 中 间 布 局 的 
设计 ， 如 图 4-35 所 示 。 
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4-35 ”完成 页 面 中 间 布局 的 设计 


4.1.8 设计 底部 布局 


页 面 底部 通常 用 于 声明 版 权 信息 、 联 系 方式 等 。 

例 4-6 设计 并 布局 页 面 底部 区 域 。 

@ 继续 例 4-5。 首 先 来 定义 #footer 样式 规则 ， 如 图 4-36 所 示 。 然 后 在 #footer 的 属性 
列表 中 单 击 【添加 属性 】 链 接 , 在 属性 下 拉 列 表 中 选中 【clear】 属 性 , 并 将 其 值 设置 为 【both]， 
这 将 确保 不 会 有 沪 动 元 素 侵 入 #footer。 


图 4-36 ”定义 #footer 样式 规则 
加 下 面 来 插入 与 #footer 样式 规则 相对 应 的 Div 标签 。 在 【 拆 分 】 视 图 下 ， 将 光标 置 
于 代码 编辑 器 中 第 二 个 水 平 线 所 在 Div 标签 的 结束 标签 后 ， 在 【插入 】 面 板 的 【布局 】 类 
别 中 单 击 【 插 入 Div 标签 】 按 钮 ， 打 开 【 插 入 Div 标签 】 对 话 框 。 选 择 插入 位 置 为 【在 插 
入 点 】, 在 【id】 下 拉 列 表 框 中 选择 footer， 如 图 4-37 所 示 。 


图 4-37 插入 footer 标签 


les 


。 第 4 章 使 用 CSS+Div 布局 页 面 。 


从 单 击 【确定 】 按钮 , 即 可 在 页 面 底部 插入 footer Div 容器 。 清 除 文本 占 位 符 的 内 容 ， 
然后 输入 版 权 信息 ， 如 “Copyright © 2008 by Choice.Lee All Rights Reserved”。 然 后 在 属 
性 检查 器 中 将 文本 居中 对 齐 ， 此 时 页 面 中 的 效果 如 4-38 所 示 。 


图 4-38 输入 页 面 版 权 信 息 


4.2 ”使 用 标尺 和 辅助 线 调整 页 面 设计 


设计 很 少 是 静态 的 ， 因 为 有 许多 不 可 知 的 变化 ， 例 如 客户 的 设计 要 求 发 生 改 变 等 。 
Dreamweaver 提供 了 标尺 和 辅助 线 ， 用 于 帮助 用 户 快速 而 简单 地 调整 页 面 设计 ， 精 确定 位 
网 页 元 素 。 


4.2.1 关于 标尺 


标尺 显示 在 页 面 的 左边 框 和 上 边框 上 ， 以 像素 、 英 寸 或 厘米 作为 单位 来 标记 。 标 尺 可 
帮助 用 户 测 量 、 组 织 和 规划 布局 。 

? 若 要 在 标尺 的 显示 和 隐藏 状态 之 间 切 换 ， 请 选择 【查看 】 人 标尺 】 代 显示 】 或 【 隐 
藏 】 命 令 。 

? 标尺 的 原点 默认 位 置 为 页 面 的 左上 角 。 如 果 需 要 更 改 原点 位 置 , 只 需 拖 动 标尺 原点 
到 页 面 上 的 指定 位 置 即 可 。 如 果 要 将 原点 重 设 到 它 的 默认 位 置 ， 请 选择 【查看 】| 
【标尺 】|【 重 设 原 点 】 命 令 。 

? ”如 果 要 更 改 标尺 的 度量 单位 ， 选 择 【 查 看 】| 【标尺 】 下 的 度量 单位 即 可 ; 或 者 在 
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图 4-39 ”修改 标尺 的 度量 单位 
4.2.2 ”关于 辅助 线 


辅助 线 是 从 标尺 拖 动 到 文档 上 的 线条 ,如 图 4-40 所 示 。 它 们 有 助 于 更 加 精确 地 放置 和 
对 齐 对 象 .用 户 还 可 以 使 用 辅助 线 来 测量 页 面 元 素 的 大 小 , 或 模拟 Web 浏览 器 的 重合 区 域 。 
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图 4-40 页 面 中 的 辅助 线 


1. 创建 辅助 线 

要 创建 水 平 或 垂直 辅助 线 ， 只 需 从 相应 的 水 平 或 垂直 标尺 上 拖 动 ， 然 后 在 【文档 】 窗 
口中 对 辅助 线 进 行 定位 ， 并 松 开 鼠 标 按钮 即 可 。 默 认 情况 下 ，Dreamweaver 以 绝对 像素 作 
为 度量 值 来 记录 辅助 线 与 文档 顶部 或 左 侧 的 距离 ， 并 相对 于 标尺 原点 来 显示 辅助 线 。 如 果 
希望 以 百分比 形式 记录 辅助 线 ， 可 以 在 创建 或 移动 辅助 线 时 按 住 Shift 键 。 

2. 查看 和 移动 辅助 线 

将 光标 移 到 辅助 线 上 ， 可 查看 其 位 置信 息 。 按 下 Ctrl 键 ， 并 将 光标 保持 在 两 条 辅助 线 
之 间 的 任何 位 置 ， 可 查看 这 两 条 辅助 线 之 间 的 距离 。 双 击 某 条 辅助 线 ， 可 打开 【移动 辅助 
线 】 对 话 框 ， 输 入 新 的 位 置 ， 单 击 【确定 】 按 钮 ， 如 图 4-41 所 示 。 

3. 锁定 和 解锁 辅助 线 

为 了 防止 因 不 小 心 而 移动 辅助 线 的 位 置 ， 您 可 以 将 辅助 线 锁定 ， 这 时 选择 【查看 】| 
【辅助 线 】|【 锁 定 辅 助 线 】 命 令 即 可 。 要 解除 辅助 线 的 锁定 状态 ,选择 【查看 】|【 辅 助 线 】 
I【 解 锁 辅助 线 】 命 令 即 可 。 

4. 将 元 素 靠 齐 辅助 线 

要 将 元 素 靠 齐 到 辅助 线 ， 可 选择 【查看 】| 【辅助 线 】|【 靠 齐 辅助 线 】 命 令 。 这 样 ， 当 
用 户 调整 诸如 表格 、 图 像 等 绝对 定位 的 元 素 时 ， 这 些 元 素 将 自动 靠 齐 到 辅助 线 。 

5. 设置 辅助 线 

选择 【查看 】|【 辅 助 线 】|【 编 辑 辅助 线 】 命 令 ， 打 开 【 辅 助 线 】 对 话 框 ， 如 图 4-42 
所 示 。 
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图 4-41 移动 辅助 线 图 4-42 【辅助 线 】 对 话 框 
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用 户 可 以 设置 辅助 线 、 距 离 的 颜色 ， 以 及 是 否 显示 、 靠 齐 或 锁定 辅助 线 ， 单 击 【 清 除 
全 部 】 按 钮 ， 可 从 页 面 中 清除 所 有 辅助 线 。 单 击 【 确 定 】 按 钮 ， 用 户 的 设置 即 在 【文档 】 
窗口 中 起 效 。 

提示 : 所 谓 距离 颜色 ,就 是 当 用 户 将 光标 保持 在 辅助 线 之 间 时 ， 作 为 距离 指示 器 出 现 
的 线条 的 颜色 。 


4.2.3 调整 页 面 设计 


继续 例 4-6， 分 别 双击 页 面 上 的 各 个 图 像 占 位 符 ， 使 用 准备 好 的 图 像 蔡 换 图 像 占 位 符 ， 
然后 调整 图 像 的 大 小 ， 结 果 如 图 4-43 所 示 。 
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图 4-43 ”使 用 图 像 蔡 换 图 像 占 位 符 


我 们 希望 图 像 能 够 在 页 面 底部 对 齐 ， 此 时 可 借助 辅助 线 来 设置 和 调整 页 面 的 布局 。 首 
先 在 标签 选择 器 部 分 选中 content 标签 ， 将 标尺 原点 移动 到 content 容器 的 左上 角 位 置 ， 如 
图 4-44 所 示 。 然 后 从 水 平 标尺 上 拖 出 一 条 水 平 辅助 线 ， 到 【文档 】 窗 口中 距离 原点 516 像 
pe ned 


: FAH ovis 


图 4-44 ”修改 标尺 的 原点 位 置 图 4-45 创建 水 平 辅助 线 


打开 【CSS 样式 】 面板 , 在 样式 列表 中 选中 【 圾 eft] 样式 规则 , 在 属性 列表 中 将 【height】 
属性 设置 为 516。 用 同样 的 方法 将 【#middle】》 和 【#ight】 样 式 规则 的 【height】 属 性 也 设 
置 为 516。 但 需要 注意 的 是 : right Div 标签 中 的 内 容 很 可 能 会 超出 Div 容器 大 小 ， 为 了 使 
内 容 不 至 于 涪 出 ， 在 属性 列表 中 ， 向 【##ight】 样 式 规则 添加 属性 【overflow】， 值 设置 为 
【scroll】( 滚 动 )。 这 样 一 来 ，right Div 标签 将 出 现 垂直 滚动 条 ， 用 于 显示 溢出 的 内 容 。 按 
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F12 键 在 浏览 器 中 预览 页 面 ， 效 果 如 图 4-46 所 示 。 
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图 4-46 页 面 修改 后 的 效果 


4.3 导出 CSS 样式 


可 以 将 页 面 的 CSS 样式 导出 到 一 个 样式 表 文 件 中 , 这 样 便 可 以 利用 该 样式 表 制 作 网 站 
中 与 该 网 页 风格 相同 或 相似 的 其 他 页 面 。 此 外 ， 当 需要 修改 页 面 风格 和 设计 时 ， 只 需要 对 
该 样式 表 文件 进行 修改 ， 即 可 快速 更 新 网 站 中 所 有 使 用 该 样式 表 的 页 面 。 

例 4-7 导出 页 面 中 的 CSS 样式 规则 。 

@ 打开 4.2.3 节 完 成 的 页 面 。 在 【CSS 样式 】 面 板 中 ,利用 Shift 键 ， 选 中 样式 列表 
中 的 所 有 样式 规则 。 

加 从 【css 样式 】 面 板 右 上 角 的 【选项 】 菜 单 中 单 击 【 移 动 CSS 规则 】 命 令 ， 打 开 

【 移 至 外 部 样式 表 】 对 话 框 ， 如 图 4-47 所 示 。 

加 选中 【新 样式 表 】 单 选 按钮 ， 单 击 【 确 定 】 按 钮 ， 打 开 【 保 存 样式 表 文 件 为 】 对 话 
框 。 导 航 到 页 面 所 在 的 文件 夹 ， 在 【文件 名 】 文 本 框 中 输入 “main.css”， 如 图 4-48 所 示 ， 
单 击 【 保 存 】 按 钮 。 

从 按 Ctrlts 键 保存 对 页 面 所 做 的 修改 。 

要 基于 一 个 独立 的 CSS 样式 表 来 制作 网 页 ， 需要 首先 将 其 导入 到 页 面 中 , 然后 再 根据 
样式 规则 逐一 地 插入 相应 的 Div 标签 。 


lz 
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4.4 关于 AP 元 素 和 AP Div 


AP 元 素 是 指 分 配 有 绝对 位 置 的 HTML 页面 元 素 ， 可 以 包含 文本 、 图 像 或 其 他 任何 可 
放置 到 HTML 文档 正文 中 的 内 容 。AP 元 素 通常 是 具有 绝对 定位 的 Div 标签 。AP Div 具有 
可 移动 性 ， 可 以 在 页 面 内 任意 移动 ， 而 且 可 以 重合 ,设置 是 否 显 示 等 。 因 此 ，AP Div 通常 
用 于 在 网 页 中 实现 诸如 弹出 菜单 、 漂 浮 图 像 等 特殊 效果 。 


4.4.1 创建 AP Div 


Dreamweaver 使 用 Div 标签 来 创建 AP 元 素 。 单 击 【 插 入 】 面 板 的 【布局 】 类 别 下 的 
【绘制 AP Div】 按钮 贸 ， 光 标 即 变 成 十 字形 状 。 在 【文档 】 窗 口 的 任意 位 置 拖 动 鼠 标 即 
可 创建 AP Div， 如 图 4-49 所 示 。 在 绘制 过 程 中 ， 编 辑 窗口 右 下 角 将 动态 显示 正在 绘制 的 
AP Div 的 大 小 ， 用 户 可 以 边 绘 制 边 查 看 其 大 小 。 

当 用 户 绘制 AP Div 时 ， 按 住 Ctrl 键 可 以 连续 绘制 新 的 AP Div。Dreamweaver 会 自动 
在 文档 中 插入 Div 标签 ， 并 为 Div 标签 指定 ID 值 。 默 认 情 况 下 将 绘制 的 第 一 个 指定 为 
apDiv1， 将 第 二 个 指定 为 apDiv2， 依 此 类 推 。 您 可 以 在 属性 检查 器 或 【AP 元 素 】 面 板 中 
重 命名 AP Div， 也 可 以 通过 修改 文档 头 中 定义 的 AP Div CSS 代码 来 实现 。 以 下 是 AP Div 
的 示例 HIML 代码 : 


#apDiv1l { 
position:absolute; 
left:34px; 
top:36px; 
width:166px; 
height:90px; 
z-index ls 
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AP Div 还 可 以 进行 嵌 套 ， 在 某 个 AP Div 内 创建 的 AP Div 称 为 嵌 套 AP Div 或 子 AP 
Div， 榜 套 AP Div 外 部 的 AP Div 称 为 父 AP Div。 子 AP Div 可 以 浮动 于 父 AP Div 之 外 的 
任何 位 置 ， 且 其 大 小 不 受 父 AP Div 的 限制 。 

要 创建 嵌 套 AP Div， 只 需 将 光标 定位 到 父 AP Div 内 ， 选 择 【 插 入 】|【 布 局 对 象 】| 


【AP Div】 命 令 ， 即 可 在 该 AP Div 内 绘制 嵌 套 的 AP Div， 如 图 4-50 所 示 。 
和 
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图 4-49 创建 AP Div 4-50 创建 嵌 套 的 AP Div 


以 下 代码 显示 了 两 个 未 嵌 套 的 AP Div 和 两 个 嵌 套 的 AP Div: 


<div id="apDivl"></div> 
<div id="apDiv2"></div> 
<div id="apDiv3"> 

<div id="apDiv4"></div> 
</div> 


4.4.2 选择 并 编辑 AP Div 


对 于 单个 AP Div， 在 【文档 】 窗 口中 单 击 其 边框 即 可 将 其 选中 ，AP Div 的 属性 检查 
器 如 图 4-51 所 示 。 
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4-51 AP Div 的 属性 检查 器 


在 属性 检查 器 中 , 用户 可 以 对 AP Div 重新 命名 , 修改 其 大 小 , 设置 其 相对 于 页 面 左 边 
(顶端 ) 或 父 AP Div 左边 (顶端 ) 的 距离 。 还 可 以 设置 AP Div 的 Z 轴 顺序 、 可 见 性 、 背 景 图 
像 、 样 式 、 溢 出 等 。 
? 【可 见 性 】 下 拉 列 表 框 中 有 4 个 选项 , default 是 默认 值 , 表示 可 见 性 由 浏览 器 决定 ; 
inherit 表示 继承 其 父 AP Div 的 可 见 性 ; visible 表示 显示 AP Div 及 其 内 容 , 而 与 父 
AP Div 的 可 见 性 无 关 ; hidden 表示 隐藏 AP Div 及 其 内 容 。 

? 【Z 轴 文本 框 则 用 于 设置 AP Div 的 Z 轴 顺序 , 也 就 是 嵌 套 AP Div 在 页 面 中 的 重 
合 顺 序 ， 较 高 值 的 AP Div 显示 在 较 低 值 的 AP Div 之 上 。 

如 果 要 移动 AP Div, 将 光标 移 到 AP Div 的 边框 上 ， 当 鼠标 变 成 十 字 箭头 时 进行 拖 动 ， 
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到 目标 位 置 后 释放 鼠标 即 可 。 

对 于 多 个 AP Div, 在 选择 时 只 需 借助 Shift 键 , 在 每 个 AP Div 的 边框 上 单 击 即 可 将 它 
们 选中 。 对 于 选中 的 多 个 AP Div， 用 户 可 以 对 它们 进行 对 齐 ， 可 以 左 对 齐 、 右 对 齐 、 对 齐 
上 缘 、 对 齐 下 缘 等 。 


4.4.3 关于 AP Div 的 堆 又 顺序 
由 于 AP Div 可 以 重合 ， 因 而 就 存在 一 个 排列 顺序 的 问题 。 合 理 地 设置 AP Div 的 堆 芭 


顺序 ， 可 以 有 效 地 控制 哪些 内 容 可 以 被 显示 出 来 、 哪 些 内 容 需 要 隐藏 。 可 以 有 多 种 方法 来 
设置 AP Div 的 堆 释 顺序 ， 最 简单 的 是 在 【AP 元 素 】 面 板 中 进行 ， 如 图 4-52 所 示 。 
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图 4-52 【AP 元 素 】 面 板 


【AP 元 素 】 面 板 中 列 出 了 页 面 中 所 有 的 AP Div， 对 于 嵌 套 的 AP Div， 它 们 则 以 树 型 
结构 显示 。 要 更 改 AP Div 的 堆 全 顺序， 实际 上 也 就 是 修改 它们 的 Z 轴 数 值 。 如 果 两 个 或 
多 个 AP Div 发 生 重 登 ， 那 么 Z 轴 数 值 大 的 将 显示 在 上 方 。 用 户 可 以 通过 拖 动 列表 中 的 AP 
Div 的 排列 顺序 来 更 改 堆 又 顺序 (Z 轴 数 值 会 相应 自动 更 改 )， 也 可 以 直接 在 AP Div 右 侧 修 
改 其 Z 轴 数 值 。 

提示 : AP Div 左 侧 的 眼睛 图 标 表 示 该 AP Div 在 页 面 中 的 显示 状态 。 含 表示 该 AP Div 
处 于 显示 状态 ， 趾 则 表示 处 于 隐藏 状态 。 


本 章 小 结 


使 用 CSS+Div 对 网 页 进行 布局 是 网 页 设计 的 潮流 ， 也 符合 Web 标准 的 需要 。 本 章 从 
一 个 空白 的 页 面 开 始 , 到 最 终 整个 页 面 布 局 的 完成 ， 详 细 介 绍 了 使 用 CSS+Div 对 网 页 进行 
布局 的 方法 、 过 程 和 技巧 ， 以 及 设计 思路 。 为 了 使 设计 更 加 完美 ， 还 需 借助 标尺 和 辅助 线 
等 工具 。AP Div 是 一 种 特殊 的 Div， 它 们 具有 绝对 定位 ， 可 以 嵌 套 、 重 又 等 特点 ， 章 末 对 
此 也 作 了 简要 介绍 。 


习题 


填空 题 
1. 一 个 以 CSS 为 基础 的 页 面 布局 包括 两 大 部 分 : 一 系列 和 与 其 对 应 的 一 系列 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


2. HTML 标签 都 是 ”出现 的 。 

3. 可 以 通过 来 唯一 标识 页 面 中 的 网 页 元 素 。 

4. Dreamweaver 提供 了 和 ， 用 于 帮助 用 户 快速 而 简单 地 调整 页 面 设计 ， 精 确定 位 网 页 
元 素 。 

5. AP 元 素 通常 是 具有 的 Div 标签 。 

6. AP Div 还 可 以 进行 嵌 套 ， 在 某 个 AP Div 内 创建 的 APDiv 称 为 ” 或  ， 嵌 套 APDiv 外 
部 的 APDiv 称 为 ”  。 

7. 更 改 AP Div 的 堆 登 顺序 ， 实 际 上 也 就 是 修改 它们 的 轴 数 值 。 

简 答题 


8. 使 用 CSS+Div 进行 网 页 布局 相对 于 传统 的 表格 布局 有 何 优势 ? 
9. AP Div 和 Div 标签 有 何 区 别 ? 

上 机 操作 题 

10. 设计 图 4-53 所 示 的 网 页 布局 。 
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4-53 ”要 完成 的 页 面 布局 
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使 用 超级 链接 


本 章 介 绍 使 用 超级 链接 实现 页 面 与 页 面 之 间 跳 转 的 方法 。 通 过 本 章 的 学 习 ， 应 该 完成 
以 下 学 习 目 标 : 

i 了 解 超级 链接 的 类 型 和 链接 路 径 

iY 学 会 创建 文本 和 图 像 链 接 

YY 学 会 创建 命名 错 记 链接 

i 学 会 创建 电子 邮件 链接 

YY 学 会 创建 下 载 链 接 和 脚本 链接 


5.1 初 识 超级 链接 


超级 链接 在 本 质 上 属于 网 页 的 一 部 分 ， 通 过 它 实 现 了 站 点 内 页 面 之 间 以 及 不 同 站 点 页 
面 间 的 跳 转 。 正 是 有 了 超级 链接 ， 实 现 了 Internet 上 各 种 信息 的 互联 ， 大 家 才 得 以 浏览 不 
同 站 点 的 内 容 和 信息 。 


5.1.1 超级 链接 的 类 型 


超级 链接 由 源 端点 和 目标 端点 组 成 。 页 面 中 有 链接 的 一 端 (如 文本 、 图 片 等 ) 称 为 源 端 
点 ， 要 跳 转 到 的 页 面 则 称 为 目标 端点 。 这 个 目标 端点 可 以 是 一 个 网 页 ， 也 可 以 是 同一 页 面 
上 的 不 同位 置 ， 还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程序 。 

根据 创建 链接 对 象 的 不 同 ， 可 以 将 超级 链接 分 为 文本 链接 、 图 像 链接 、 表 单 链接 等 。 

? 文本 链接 : 就 是 在 文本 对 象 上 创建 的 超级 链接 ， 如 图 5-1 所 示 。 文 本 链接 是 最 常用 

的 超级 链接 ， 文 本 链接 通常 在 文本 下 方 会 带 有 下 划 线 。 

? 图像 链 接 : 就 是 在 图 像 、Flash 对 象 上 创建 的 超级 链接 ， 如 图 5-1 所 示 。 图 像 链接 

美观 、 实 用 ， 是 一 种 比较 常用 的 链接 方式 。 

? 表单 链接 : 这 是 一 种 比较 特殊 的 超级 链接 ， 当 用 户 填写 完 表单 ， 单 击 页 面 上 的 【 提 

交 】 按 钮 或 其 他 按钮 提交 内 容 时 ， 会 自动 跳 转 到 目标 页 面 ， 如 图 5-2 所 示 。 


尖 观 ， 时 入 “ 浊 子 旬 才 
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图 5-1 文本 链接 和 图 像 链接 图 5-2 表单 链接 
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根据 目标 端点 的 位 置 及 方式 的 不 同 ， 可 以 将 超级 链接 分 为 外 部 链接 、 内 部 链接 、 局 部 

链接 和 电子 邮件 链接 4 种 。 

? 外 部 链接 : 跳 转 到 的 页 面 是 站 点 外 的 页 面 。 外 部 链接 可 实现 网 站 与 网 站 之 间 页 面 的 
跳 转 ， 从 而 将 访客 的 浏览 范围 扩大 到 整个 网 络 。 例 如 网 站 首页 常用 的 友情 链接 就 是 
外 部 链接 ， 如 图 5-3 所 示 。 

? ”内 部 链接 : 内 部 链接 的 目标 端点 为 站 点 内 的 其 他 页 面 ， 如 站 点 导航 就 是 内 部 链接 ， 
如 图 5-4 所 示 。 


新 闻 车 事 社会 体育 Fl 火炬 博客 
财经 服 票 基金 扣 乐 电视 音乐 视频 
科技 手机 数码 汽车 购车 搜 车 房产 


图 5-3 ”外 部 链接 图 5-4 内 部 链接 


? 局 部 链接 : 指 跳 转 到 页 面 本 身 或 其 他 页 面 某 一 指定 位 置 的 链接 。 局 部 链接 通过 文档 
中 的 命名 错 点 来 实现 ， 例 如 单 击 图 5-5 左 图 中 的 【返回 顶部 】 链 接 ， 可 跳 转 到 页 面 
的 顶部 ， 如 图 5-5 右 图 所 示 。 


5-5 ”局 部 链接 


? 电子 邮件 链接 : 当 需 要 进行 电子 邮件 操作 时 可 创建 电子 邮件 链接 。 访客 单 击 电子 邮 
件 链接 后 ,系统 会 自动 启动 电子 邮件 程序 , 在 其 中 编写 好 邮件 可 将 邮件 发 送 到 所 链 
接 的 邮箱 中 ， 如 图 5-6 所 示 。 


家 由 移 闫 各 合作 开间 全 


到 18 4AIEFE 风 华 ;: 和 二 面 要 | “ 


5-6 ”电子 邮件 链接 


。 第 5 章 使 用 超级 链接 。 


5.1.2 ”超级 链接 路 径 


在 创建 超级 链接 时 ， 路 径 的 设置 是 十 分 重要 的 。 如 果 设 置 不 正确 ， 则 可 能 导致 无 法 跳 
转 或 跳 转 到 不 正确 的 页 面 上 。 超 级 链接 的 路 径 主 要 有 绝对 路 径 、 文 档 相 对 路 径 、 站 点 根 目 
录 相 对 路 径 3 种 。 
? 绝对 路 径 链 接 : 主要 用 于 创建 具有 固定 网 址 的 外 部 链接 ， 如 友情 链接 等 。 创建 绝对 
路 径 链接 时 ， 需 要 给 出 目标 端点 完整 的 URL 地 址 ， 如 http://www.baidu.com。 

? 文档 相对 路 径 链 接 : 主要 用 于 创建 站 点 的 内 部 链接 , 它 使 用 目标 端点 页 面相 对 于 当 
前 页 面 所 在 的 位 置 来 创建 链接 路 径 。 

? ”站 点 根 目录 相对 路 径 链接 : 和 文档 相对 路 径 链接 相似 , 但 使 用 的 参照 是 站 点 的 根 目录 。 


5.2 创建 超级 链接 


下 面 分 别 介绍 文本 链接 、 图 像 链接 、 命 名 锚 点 链接 、 电 子 邮 件 链接 、 空 链接 和 脚本 链 
接 的 创建 方法 。 


5.2.1 创建 文本 链接 


要 创建 文本 链接 ， 首 先 应 在 页 面 上 选中 文本 对 象 ， 然 后 在 其 属性 检查 器 的 【链接 】 下 
拉 列 表 框 中 设置 目标 端点 ， 如 图 5-7 所 示 。 如 果 链 接 的 目标 端点 位 于 站 点 内 ， 用 户 可 以 单 
击 右 侧 的 【文件 】 按 钮 ， 打 开 【 选 择 文件 】 对 话 框 ， 从 中 指定 要 跳 转 到 的 页 面 。 设 置 好 了 
目标 端点 后 ， 用 户 还 需要 从 【目标 】 下 拉 列 表 框 中 选择 以 何 种 方式 跳 转 到 目标 页 面 。 


EL 搜狐 网 易 
Google 


图 5-7 创建 文本 链接 


Bai 癌 到 度 


? _blank: 单 击 文本 链接 后 ， 目 标 端点 页 面 会 在 一 个 新 窗口 中 打开 。 

? _parent: 单 击 文本 链接 后 ， 在 上 一 级 浏览 器 窗口 中 显示 目标 端点 页 面 ， 这 种 情况 
在 框架 页 面 中 比较 常见 。 

?  _self: Dreamweaver 的 默认 设置 ， 单 击 文本 链接 后 ， 在 当前 浏览 器 窗口 中 显示 目标 
端点 页 面 。 

? _top: 单 击 文本 链接 后 ， 在 最 顶层 的 浏览 器 窗口 中 显示 目标 端点 页 面 。 

保存 并 预览 页 面 ， 可 以 发 现 被 设置 了 链接 的 文本 会 显示 一 条 下 划 线 ， 将 光标 移 到 链接 

文本 上 ， 光 标 变 成 手 形状 ， 如 图 5-8 所 示 ， 单 击 即 可 打开 目标 页 面 。 


新 浪 搜狐 网 易 
5-8 文本 链接 效果 
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如 果 用 户 不 想 要 文本 链接 中 的 下 划 线 ， 或 想 自 定义 链接 文本 在 单 击 前 、 单 击 时 以 及 单 
击 后 的 状态 ， 则 可 以 为 页 面 定 义 文本 链接 的 CSS 样式 。 例 如 将 如 下 代码 放 到 页 面 的 
<style> 和 </style> 标 签 之 间 ， 可 消除 链接 文本 的 下 划 线 ， 同 时 定义 链接 文本 针对 鼠标 操 
作 的 不 同 状态 : 

:link{color:#c00;text-decoration:none} 


visited{color:#c30;text-decoration:none} 
:hover{color:#f60;text-decoration:none} 


pp py py pp 


active{color:#f90;text-decoration:none} 
重新 预览 网 页 ， 效 果 如 图 5-9 所 示 。 


新 浪 
图 5-9 定义 链接 文本 的 样式 


注意 : 在 上 述 代码 中 ，link、visited、hover、active 的 意义 请 参阅 附录 A。 另 外 ， 它 
们 的 先后 定义 顺序 不 能 改变 ， 否 则 得 到 的 效果 可 能 与 预期 不 一 致 。 


5.2.2 ”创建 图 像 链接 


用 户 可 以 为 整个 图 像 创建 链接 ， 方 法 与 创建 文本 链接 相似 。 首 先 在 页 面 中 选中 要 创建 
链接 的 图 像 ， 然 后 在 其 属性 检查 器 的 【链接 】 文 本 框 中 设置 目标 端点 位 置 即 可 ， 如 图 5-10 
所 示 。 

用 户 也 可 以 为 同一 张 图 像 创 建 多 个 热点 区 域 ， 然 后 分 别 为 这 些 热点 区 域 创建 链接 。 但 
创建 图 像 热 点 之 前 ， 用 户 需要 先 在 图 像 上 创建 热点 区 域 。 通 过 属性 检查 器 的 和 矩形、 椭圆 形 
和 多 边 形 热点 工具 冲 、 吕 、 岂 ， 用 户 可 根据 需要 在 图 像 上 绘制 热点 区 域 ,然后 在 【地 图 】 
文本 框 中 对 热点 命名 ， 如 图 5-11 所 示 。 利 用 指针 热点 工具 图 ， 用 户 可 以 对 热点 进行 选择 、 
移动 、 调 整 区 域 范围 等 。 
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图 5-10 ”为 整个 图 像 创 建 链接 图 5-11 图 像 热 点 工具 


由 于 目前 除 AltaVista、Google 明确 支持 图 像 热 点 链接 外 ， 其 他 搜索 引擎 都 不 支持 ， 所 
以 建议 用 户 在 页 面 中 不 用 或 少 用 图 像 热 点 链接 。 

提示 : 在 创建 图 像 链 接 时 ，Dreamweaver CS4 已 不 再 将 属性 “a border="0"” 自 动 插 入 
到 <img> 标 签 中 。 如 果 不 希 望 链接 图 像 显 示 出 边框 ， 请 创建 CSS 规则 “img{border:0}”。 


5.2.3 创建 锚 记 链接 


锚 记 链接 又 称 为 页 内 链接 ， 它 通过 对 文档 中 指定 的 位 置 命名 ， 实 现 单 击 锚 记 链接 而 直 
接 跳 转 到 该 命名 位 置 的 效果 。 锚 记 链 接 一 般 用 在 网 页 篇 幅 较 大 ， 浏 览 者 需要 翻 屏 浏 览 的 情 


leo 


“。 第 5 章 ， 使 用 超级 链接 。 


况 。 因 此 ， 使 用 锚 记 链接 有 助 于 访客 阅读 页 面 。 
创建 锚 记 链接 需要 分 两 个 步骤 : 首先 定义 命名 锚 记 , 然后 创建 到 这 个 命名 锚 记 的 链接 。 
例 S-1 利用 命名 锚 记 创建 页 内 链接 。 
站 按 CtltN 新 建 一 个 空白 的 HTML 文档 ， 在 页 面 中 
等 离子 数字 电视 动态 清晰 度 测试 方 发 布 


A 3 消息 ， 由 中 国电 子 视 像 行业 协会 主 ; 二 会 仿 
日 在 北京 页 都 信 苑 酒店 在 行 。 中 国 系 筷 网 有 为 本 全 程 


文档 内 容 ， 如 图 5-12 所 示 。 


全 年 的 平板 电视 销 重 将 突破 1400 万 右 。 奥 
求 ， 器 | 是 的 由 视 届 二 要 偶 
轻 Rf 元 其 用 


| 
性 ， 能 名 让 这 本 的 和 天: 
维 咨 询 (AVC) 对 等 离子 彩 4 和 有 场 分 析 的 续 果 素 明 。 最 主要 | 
求 特征 之 一 。 和 Wb 


图 5-12 输入 文档 内 容 


@@ 将 光标 置 于 页 首 需要 插入 命名 锚 点 的 位 置 , 在 本 例 中 位 置 为 文章 标题 的 最 左边 。 选 
择 【 插 入 】1【 命 名 锚 记 】 命 令 ， 打 开 【 命 名 锚 记 】 对 话 框 。 输 入 锚 记 的 名 称 text_top， 单 
击 【 确 定 】 按 钮 。 此 时 ， 页 面 中 光标 所 在 位 置 将 出 现 一 个 锚 记 标记 ， 如 图 5-13 所 示 。 

加 在 网 页 文档 的 右 下 角 输 入 “【 返 回 顶部 】” ， 然 后 将 文本 “【 返 回 顶部 】” 选 中 
在 属性 检查 器 的 Se 文本 框 中 输入 “#text Lop ， 如 图 5-14 所 示 。 


图 5-13 ”创建 命名 锚 记 图 5-14 ”链接 命名 锚 记 


人 @ 再 次 选中 文本 “【 返 回 顶 部 】” ， 选 择 【 窗 口 】|【 标 签 检查 器 】 命 令 ， 打 开 【 标 
签 检 查 器 】〗】 面 板 。 打 开 【 属 性 】 选 项 卡 ， 将 【title】 属 性 设置 为 “top”， 如 图 5-15 所 示 。 


加 保存 并 预览 网 页 ， 单 击 页 面 底部 的 【返回 顶部 】 链 接 ， 页 面 将 直接 跳 转 到 页 首 ， 如 
5-16 所 示 。 
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图 5-15 设置 提示 信息 图 5-16 页 面 预览 效果 
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使 用 命名 锚 记 ， 除 了 可 以 跳 转 到 文档 的 指定 位 置 外 ， 还 可 以 跳 转 到 其 他 文档 中 的 指定 
位 置 ， 但 需要 在 链接 命名 锚 记 时 加 上 文档 的 路 径 。 


5.2.4 创建 电子 邮件 链接 


单 击 页 面 上 的 电子 邮件 链接 后 ， 通 常会 启动 机 器 上 安装 的 电子 邮件 客户 端 程序 。 访 客 
可 以 编辑 邮件 ， 并 将 邮件 发 送 到 指定 的 地 址 。 创 建 电子 邮件 链接 的 方法 和 创建 文本 链接 相 
似 ， 首 先 选择 要 创建 电子 邮件 链接 的 网 页 元 素 ( 文 本 、 图 像 等 )， 然 后 在 该 对 象 的 属性 检查 
器 中 的 【链接 】 文 本 框 中 输入 “mailto:” 和 电子 邮件 地 址 即 可 ， 如 图 5-17 所 示 。 
链接 mailto: choicel03@sohu. com > 人 苇 回 
eS 0 By Chore Lo AL Rhis Rosaryed MN _ 日 标 
图 5-17 创建 电子 邮件 链接 


为 了 使 用 户 明 白 该 链接 的 作用 , 可 以 为 邮件 链接 设置 提示 信息 。 选 中 文字 “联系 我 们 ”， 
然后 打开 【标签 选择 器 】 面 板 ， 在 属性 列表 中 修改 【title】 属 性 的 值 ， 例 如 “发 邮件 给 我 
们 ”等 。 

5.2.5 创建 其 他 特殊 链接 


1. 下 载 链接 

下 载 链接 在 软件 下 载 网 站 和 源 代码 下 载 网 站 应 用 得 比较 多 。 下 载 链接 的 创建 方法 和 一 
般 链 接 的 创建 方法 相同 ， 只 是 所 链接 的 内 容 是 一 个 软件 文件 ， 而 不 是 网 页 文档 、 命 名 锚 记 
或 电子 邮件 ， 如 图 5-18 所 示 。 当 单 击 下 载 链接 时 ， 会 弹出 【文件 下 载 】 对 话 框 ， 单 击 【 保 
存 】 按 钮 ， 即 可 将 链接 的 软件 下 载 到 本 地 计算 机 中 ， 如 图 5-19 所 示 。 


三 com Df 
中 文 版 Adobe Dreamweaver CS4 Mh TR" &. 
下 载 地 址 二 美 | 无 v]BZr 王 导 二 招标 题 0 2 | 
- es 
5-18 ”链接 镜像 文件 5-19 【文件 下 载 】 对 话 框 
2. 空 链接 


空 链接 实际 上 是 一 个 未 设计 的 链接 ， 利 用 空 链 接 可 激活 页 面 上 的 对 象 或 文本 。 一 旦 对 
象 或 文本 被 激活 ， 当 光标 经 过 该 链接 时 ， 设 计 者 便 可 为 其 附加 行为 以 交换 图 片 或 显示 层 。 
要 创建 空 链接 ， 用 户 只 需 在 选 定 文字 或 图 片 后 ， 在 属性 检查 器 的 【链接 】 文 本 框 中 输入 
“javascript:;” 或 是 一 个 # 号 就 可 以 了 。 

使 用 # 号 的 问题 在 于 ， 当 访问 者 单 击 该 链接 时 ， 某 些 浏览 器 可 能 跳 转 到 页 面 的 顶部 。 而 
单 击 JavaScript 空 链接 则 不 会 在 页 面 上 产生 任何 效果 ， 因 此 建议 用 户 使 用 “javascript:;”。 

3. 脚本 链接 

脚本 链接 是 指 执行 JavaScript 代码 或 调用 JavaScript 函数 。 脚本 链接 可 以 让 访客 不 用 离 
开 当 前 页 面 就 可 以 得 到 关于 某 个 项 目的 一 些 附 加 信息 。 此 外 , 脚本 链接 还 可 用 于 执行 计算 、 
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表单 确认 和 其 他 处 理 任务 。 

要 创建 脚本 链接 ， 只 需 在 选 定 文字 或 图 片 后 ， 在 属性 检查 器 的 【链接 】 文 本 框 中 输入 
“javascript: ”， 然 后 跟 上 一 些 JavaScript 代码 或 函数 调用 就 可 以 了 。 例 如 ， 
“javascript:alert(hello!)”， 当 用 户 单 击 该 链接 时 ， 系 统 将 弹出 一 个 提示 框 ， 并 提示 文字 
信息 : hello! 。 


本 章 小 结 
通过 本 章 的 学 习 ， 读 者 应 首先 了 解 超级 链接 的 作用 、 类 型 和 超级 链接 路 径 的 概念 ， 这 


是 学 习 在 网 页 中 设置 超级 链接 的 基础 。 同 时 ， 读 者 还 要 掌握 文本 链接 、 图 像 链接 、 锚 记 链 
接 、 电 子 邮 件 链接 、 下 载 链接 这 些 常 用 链接 的 创建 方法 ， 这 在 网 页 制作 中 十 分 重要 。 


习 题 

填空 题 

1. 超级 链接 在 本 质 上 属于 网 页 的 一 部 分 ， 通 过 它 实现 了 站 点 内 页 面 之 间 以 及 不 同 站 点 页 面 间 的 跳 转 。 它 
由 和 组 成 。 

2. 根据 创建 链接 对 象 的 不 同 ， 可 以 将 超级 链接 分 为 文本 链接  、_ 等 。 根 据 目 标 端点 的 
位 置 及 方式 的 不 同 ， 可 以 将 超级 链接 分 为 、_ 、 局 部 链接 和 电子 邮件 链接 4 种 。 

3. 锚 记 链接 又 称 为 ， 它 通过 对 文档 中 指定 的 位 置 命名 ， 实 现 单 击 锚 记 链接 而 直接 跳 转 到 该 命名 
位 置 的 效果 。 

4. 可 以 让 访客 不 用 离开 当前 页 面 就 可 以 得 到 关于 某 个 项 目的 一 些 附加 信息 。 此 外 ， 它 还 可 用 于 
执行 计算 、 表 单 确认 和 其 他 处 理 任务 。 

选择 题 


5. 要 在 页 面 的 指定 位 置 上 创建 链接 ， 应 选用 (。 )。 
A. 外 部 链接 B. 内 部 链接 ” C. 局 部 链接 ” D. 脚本 链接 
6. 下 列 路 径 中 ，( “) 是 站 点 根 目录 路 径 。 


A. /products/catalog.html B. ../../catalog.asp 
C. fuwu/content.html D. http://www.linkyoume.com/index.html 
简 答题 


7. 简 述 超级 链接 的 几 种 路 径 以 及 它们 的 不 同 之 处 。 

8. 如 何 创 建 电子 邮件 链接 ? 

上 机 操作 题 

9. 参照 5.2.1 和 5.2.2 节 内 容 ， 为 图 5-7 中 的 文本 “搜狐 ”、“ 网 易 ” 创 建 链接 ， 分 别 链接 到 相应 的 网 址 ， 
并 为 Google 的 Logo 图 片 创建 图 像 链接 。 
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第 6 章 


添加 多 媒体 元 素 


本 章 介绍 在 网 页 中 添加 音频 、Flash 对 象 、 动 画 等 媒体 元 素 的 方法 和 技巧 。 通过 本 章 的 
学 习 ， 应 该 完成 以 下 学 习 目 标 : 

YY 学 会 在 页 面 中 使 用 音频 文件 

fy 学 会 在 页 面 中 使 用 Flash 动画 、Flash 文本 、Flash 按钮 等 Flash 媒体 元 素 

YY 学 会 在 页 面 中 使 用 Shockwave 影片 、Java Applet 等 其 他 媒体 元 素 

YY 学 会 利用 时 间 轴 制作 简单 的 动画 


6.1 添加 音频 对 象 


随 着 计算 机 硬件 水 平 的 提升 和 网 络 带宽 的 不 断 拓 展 ， 网 页 中 越 来 越 多 地 出 现 了 音频 、 
Flash 动画 、Shockwave 影片 等 多 媒体 元 素 ， 它 们 在 丰富 页 面 内 容 的 同时 ， 也 使 网 页 具备 了 
更 好 的 可 观赏 性 和 交互 性 ， 极 大 提升 了 访客 的 浏览 体验 。 

音频 文件 有 多 种 格式 ，Dreamweaver 支持 在 页 面 中 插入 如 下 几 种 格式 的 音频 文件 : 

? .midi 或 .mid( 乐 器 数字 接口 ): 这 是 一 种 使 用 特殊 硬件 和 软件 在 计算 机 上 合成 的 音 
频 格式 ， 能 够 被 大 多 数 浏 览 器 所 支持 ， 并 且 播放 时 不 需要 插件 。MIDI 音频 的 音质 
非常 好 ， 但 效果 受 声卡 的 影响 较 大 。 

? .wav: 具备 较 好 的 音质 ， 为 大 多 数 浏览 器 所 支持 ， 播 放 时 不 需要 插件 。 但 WAV 音 
频 的 文件 大 小 通常 较 大 ， 因 而 在 网 页 中 的 应 用 受到 一 定 限制 。 

? .aif( 音 频 交 换文 件 格式 ): 和 WAYV 音频 相似 ,也 有 具有 很 好 的 音质 ， 为 大 多 数 浏览 器 
所 支持 ， 播 放 时 不 需要 插件 ， 但 文件 大 小 较 大 。 

2? .mp3( 运 动 图 像 专家 组 音频 ): MP3 音频 是 一 种 压缩 格式 , 文件 大 小 较 小 , 但 音质 却 
可 以 达到 CD 水 平 。MP3 音频 还 支持 流 式 处 理 ， 即 可 以 边 听 边 下 载 ， 因而 是 网 页 中 
最 常用 的 音频 格式 。 要 播放 MP3 音频 ， 用 户 机 器 上 必须 安装 有 播放 MP3 音频 的 应 
用 程序 或 插件 ， 如 QuickTime、Windows Media Player 或 RealPlayer。 

? .ra、.ram、.rpm 或 Real Audio: 这 些 都 是 经 过 高 度 压 缩 后 的 音频 格式 ， 文 件 大 小 
比 MP3 格式 还 小 ， 但 音质 较 差 ， 因 而 需要 使 用 新 的 播放 器 或 解码 器 来 提高 音 
这 些 音频 格式 都 支持 流 式 处 理 , 用 户 需 要 安装 诸如 RealPlayer 等 辅助 应 用 程序 或 插 
件 才 可 以 播放 它们 。 

例 6-1 为 页 面 设 置 背景 音乐 。 

和 @ 新 建 一 个 空白 的 HTML 页 面 。 选 择 【 插 入 】|【 标 签 】 命 令 ， 打 开 【 标 签 选 择 器 】 
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对 话 框 。 在 左 侧 树 中 展开 【HTML 标签 】| 【浏览 器 特定 】 节 点 ， 在 右 侧 的 列表 框 中 选中 
【bgsound】 选 项 ， 如 图 6-1 所 示 。 

加 单 击 【 插 入 】 按 钮 ， 打 开 【 标 签 选 择 器 -bgsound】 对 话 框 。 单 击 【 源 】 文 本 框 右 侧 
的 【浏览 〗】 按 钮 ， 选 择 要 插入 的 音频 文件 。 在 【循环 】 下 拉 列 表 框 中 选择 【无 限 】， 以 便 
音乐 可 以 循环 播放 ， 如 图 6-2 所 示 。 


6-1 【标签 选择 器 】 对 话 框 6-2 选择 背景 音乐 


加 返回 【标签 选择 器 】 对 话 框 ， 单 击 【插入 】 按 钮 将 音频 文件 插入 页 面 中 。 保 存 并 预 
览 页 面 , 在 打开 网 页 的 同时 即 可 听 到 背景 音乐 了 。 由 于 背景 音乐 是 在 网 页 的 后 台 进 行 播放 ， 
因而 完全 不 会 影响 浏览 者 的 其 他 操作 。 

提示 : 使 用 <bgsound> 标 签 添加 的 背景 音乐 在 页 面 最 小 化 时 会 自动 停止 播放 。 

除了 可 以 为 网 页 添加 背景 音乐 外 ， 用 户 还 可 以 为 网 页 对 象 创建 音乐 。 这 通过 为 对 象 创 
建行 为 来 实现 。 

例 6-2 为 页 面 对 象 添加 音乐 。 

和 @ 首先 在 页 面 中 选中 要 设置 音乐 的 页 面 元 素 ， 可 以 是 文本 、 图 像 等 。 | 

@@ 选择 【窗口 】|【 行 为】 命令 ,打开 【行为 】 面 板 。 单 击 【 添 加 行为 】 按 钮 +， 从 
下 拉 菜 单 中 选择 【建议 不 再 使 用 】〗| 【播放 声音 】 命 令 , 打开 【播放 声音 】 对 话 框 ,如 图 6-3 
所 示 。 单 击 【 浏 览 〗 按 钮 ， 选 择 要 添加 的 声音 文件 。 

加 设置 【播放 声音 】 行 为 对 应 的 鼠标 动作 ， 在 左 侧 的 下 拉 列 表 中 选择 【OnClick】 选 
项 ， 如 图 6-4 所 示 。 


图 6-3 【播放 声音 】 对 话 框 图 6-4 为 文本 设置 行为 


@@ 保存 并 预览 网 页 。 单 击 文本 “下 一 站 天 后 ”， 网 页 中 将 开始 播放 该 音乐 。 
以 行为 方式 为 页 面 对 象 设置 的 音乐 ， 实 际 上 是 以 插件 的 形式 在 页 面 中 存在 的 。 用 户 可 
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以 注意 到 ，【 文 档 】 窗 口中 页 面 底部 出 现 了 一 个 插件 标记 ， 选 中 该 标记 ， 可 通过 属性 检查 
器 设置 插件 的 宽 、 高 、 对 齐 方式 、 边 框 等 ， 如 图 6-5 所 示 。 

单 击 【 参 数 】 按 钮 ， 将 打开 一 个 【参数 】 对 话 框 ， 如 图 6-6 所 示 。 用 户 可 以 单 击 加 号 
和 减 号 按钮 来 增加 或 删除 附加 参数 。 其 中 的 一 些 参数 是 通用 的 ， 例 如 LOOP 参数 表示 插件 
中 的 媒体 是 否 循 环 播放 ; AUTOSTART 参数 表示 是 否 自动 播放 ; HIDDEN 参数 表示 是 否 隐 
藏 插件 。 


了 人 插件 , 宽 D 源 文件 下 一 站 天 后 wp3 已 ”于 加 类 C5) onecalTixt = 
IT 高 6 插件 URE 已 [CE ] 

生 直 边 距 边框 

水 边 距 | 


6-5 插件 的 属性 检查 器 图 6-6 【参数 】 对 话 框 


用 户 还 可 以 以 杠 入 方式 将 音乐 文件 嵌入 到 页 面 中 直接 播放 ， 这 在 一 些 在 线 音乐 欣赏 站 
点 中 应 用 得 较 多 ， 但 需要 访客 安装 有 相应 的 播放 插件 。 

例 6-3 在 页 面 中 嵌入 音乐 文件 。 

人 @@ 首先 将 光标 定位 到 页 面 中 需要 插入 音乐 的 位 置 ， 选 择 【 插 入 】| 【媒体 】| 【插件 】 
命令 ， 打 开 【 选 择 文件 】 对 话 框 。 

加 双击 需要 插入 到 页 面 中 的 音乐 文件 ， 完 成 音乐 的 杠 入 ,如 图 6-7 左 图 所 示 。 调 整 插 
入 的 音乐 图 标的 大 小 。 

加 保存 并 预览 网 页 ， 效 果 如 图 6-7 右 图 所 示 。 
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图 6-7 在 页 面 中 嵌入 音乐 文件 


6.2 ”添加 Flash 对 象 


Flash 是 一 种 高 质量 、 高 压缩 率 的 矢量 动画 ， 具 有 超 强 的 交互 能 力 ， 是 网 页 中 应 用 最 为 
广泛 的 动态 元 素 之 一 。 要 在 浏览 器 中 播放 Flash 动画 ， 浏 览 器 中 必须 集成 有 Flash 播放 器 。 
最 新 的 Netscape Navigator 和 Microsoft Internet Explorer 中 ， 都 已 集成 了 Flash 播放 器 。 其 
中 ，Navigator 通过 相应 的 插件 来 实现 ，Internet Explorer 则 是 通过 ActiveX 控件 来 实现 的 。 
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6.2.1 Flash 的 文件 类 型 


在 将 Flash 对 象 添加 到 页 面 文档 之 前 , 首先 来 了 解 一 下 在 Flash 中 可 以 创建 的 几 种 文件 
类 型 。 

? Flash 源 文件 (.f1la): Flash 源 文件 是 指使 用 Flash 应 用 程序 创建 的 任何 项 目的 原始 文 
件 。 这 种 类 型 的 文件 只 能 在 Flash 软件 中 打开 ， 而 不 能 在 Dreamweaver 或 浏览 器 中 
打开 。 但 是 用 户 可 以 用 Flash 软件 打开 这 种 文件 ， 然 后 将 其 导出 为 可 用 于 浏览 器 的 
SWF 或 SWT 文 件 。 

? ”Flash 电影 文件 (.swf): 这 是 一 种 压缩 过 的 Flash 源 文件 。 这 种 文件 能 够 在 浏览 器 中 
播放 并 能 在 Dreamweaver 中 预览 ， 但 不 能 被 Flash 软件 编辑 。 当 要 在 网 页 中 使 用 
Flash 按钮 和 文本 对 象 时 ， 可 以 创建 这 种 文件 类 型 。 

? 了 lash 库 文件 Cswb: Flash 库 文 件 用 于 修改 和 替换 Flash 电影 文件 中 的 信息 。 这 种 
文件 可 用 于 Flash 按钮 对 象 ， 它 允许 用 户 使 用 文本 或 链接 来 修改 模板 ， 创 建 自 定义 
SWF 文件 并 插入 到 网 页 文档 中 。Dreamweaver 中 提供 的 Flash 按钮 、 文 本 就 是 swt 
格式 的 文件 ， 用 户 可 在 Adobe Dreamweaver CS4/Configuration/Flash Objects/Flash 
Buttons 和 Flash Text 文件 夹 中 找到 这 些 库 文件 。 

? ”Flash 视频 (.f1v): 这 是 一 种 视频 文件 ,包含 经 过 编码 的 音频 和 视频 数据 ,可 通过 Flash 
播放 器 传送 。 目 前 ， 许 多 视频 门户 网 站 提供 的 在 线 视频 服务 使 用 的 都 是 FLV 视频 
格式 ， 如 土豆 网 、56 网 、Mofile 等 。 


6.2.2 插入 Flash 动画 


网 页 中 最 常见 的 、 具 有 动画 效果 的 Banner 或 导航 条 ， 都 是 Dreamweaver 插入 的 Flash 
动画 ， 即 SWF 格式 的 Flash 文件 。 常 见 的 Flash 动画 有 两 种 : 一 种 是 普通 动画 ， 另 一 种 是 
透明 动画 。 

1. 插入 普通 的 Flash 动画 

普通 Flash 动画 的 插入 方法 非常 简单 , 将 光标 置 于 页 面 中 要 插入 动画 的 位 置 , 单 击 【 插 
入 】 面 板 的 【常用 】 类 别 下 的 【媒体 】 按 钮 组 ， 在 下 拉 选 项 中 单 击 【SWF】， 在 打开 的 对 
话 框 中 选择 要 插入 的 Flash 文 件 即 可 。 插 入 到 页 面 中 的 Flash 动画 会 显示 为 一 个 灰色 的 方 框 ， 
上 面 有 Flash 标记 ， 如 图 6-8 所 示 。 


图 6-8 页 面 中 插入 的 Flash 动画 


选中 插入 的 Flash 动画 ， 可 在 属性 检查 器 中 对 Flash 动画 的 大 小 、 名 称 、 播 放 参 数 进行 
设置 ， 如 图 6-9 所 示 。 选 中 【循环 】 复 选 框 ，Flash 对 象 将 在 浏览 页 面 时 连续 播放 ， 否 则 播 
放 一 次 后 就 停止 播放 。 选 中 【自动 播放 】 选 项 框 ， 在 浏览 页 面 时 将 自动 播放 Flash 动画 。 
通过 【品质 】 下 拉 列 表 框 ， 用 户 可 设置 Flash 动画 的 播放 品质 。 在 【比例 】 下 拉 列 表 框 中 
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可 设置 Flash 动画 的 显示 比例 : 【默认 】 表 示 显 示 整 个 动画 ;， 【无 边框 】 表 示 使 动画 适合 
设 定 的 尺寸 ， 维 持原 始 的 纵横 比 ; 【严格 匹配 】 表 示 对 动画 以 设 定 的 尺寸 进行 缩放 ， 而 不 


管 纵横 比如 何 。 
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图 6-9 ”Flash 动画 的 属性 检查 器 


用 户 可 以 在 Dreamweaver 中 预览 Flash 动画 的 效果 ， 单 击 【播放 】 按 钮 ， 如 图 6-10 所 
示 ， 但 播放 状态 下 不 能 对 动画 进行 编辑 。 单 击 【 停 止 】 按 钮 ， 可 停止 播放 Flash 动画 。 


图 6-10 播放 Flash 动画 


2. 插入 透明 的 Flash 动画 

当 要 插入 的 Flash 动画 没有 背景 图 像 时 ， 可 以 将 其 设置 为 透明 动画 ， 登 加 显示 在 页 面 
内 容 之 上 。 

例 6-4 在 页 面 上 使 用 透明 Flash 动画 。 

人 启动 Dreamweaver CS4， 新 建 一 个 基于 【 列 固定 ， 居 中 】CSSs 样式 的 HTML 文档 。 
在 属性 检查 器 中 单 击 【页面 属性 】 按 钮 , 打开 【页 面 属性 】 对 话 框 ,为 页 面 设置 背景 图 片 ， 
如 图 6-11 所 示 。 
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6-11 为 页 面 设置 背景 图 片 


[2 切换 到 【代码 】 视 图 ,在 CSS 样式 定义 区 域 ,将 【.oneColFixCtr #container】 的 【width】 
属性 设置 为 730 像素 。 同 理 ， 修 改 【.oneColFixCtr #mainContent】 的 【width】 属 性 为 730 
像素 ， 并 添加 【background-image】 属 性 ， 如 下 所 示 : 


background-image: url (banner.JPG); 


提示 : 在 【代码 】 视 图 中 ,可 以 通过 使 用 代码 直接 修改 CSS 规则 , 这 与 在 【CSS 样式 】 
面板 中 通过 【CSS 规则 定义 】 对 话 框 来 修改 是 一 致 的 。 上 面 的 样式 代码 为 mainContent Div 


les_ 


。 第 6 章 ， 添 加 多 媒体 元 素 。 


素 


标签 设置 了 背景 图 像 。 
此 时 HTML 中 的 效果 如 图 6-12 所 示 。 


图 6-12 页 面 文档 的 效果 


加 将 光标 置 于 mainContent 标签 中 ， 单 击 【 插 入 】 面 板 的 【常用 】 类 别 下 的 【媒体 】 
按钮 组 ， 在 下 拉 选 项 中 单 击 【SWF】， 在 打开 的 对 话 框 中 选择 要 插入 的 Flash 透明 动画 文 
件 。 在 页 面 中 调整 Flash 动画 的 大 小 ， 使 之 与 mainContent 标签 定义 的 容器 大 小 一 致 。 

入 单 击 Flash 动画 的 属性 检查 器 中 的 【播放 】 按 钮 ， 查 看 Flash 动画 播放 效果 。 单 击 


【参数 】 按 钮 ， 在 【参数 】 对 话 框 中 添加 【wmode】 参 数 ， 并 将 值 设置 为 transparent， 如 
图 6-13 所 示 。 


ET 


6-13 ”插入 并 设置 Flash 透明 动画 


各 单 击 【停止 】 按 钮 ， 使 Flash 动画 进入 编辑 状态 。 单 击 【 插 入 】 
别 下 的 【绘制 AP Div】 按 钮 ， 在 Flash 动画 上 绘制 AP Div。 


人 @ 绘制 完成 后 , 将 光标 置 于 AP Div 内 ,用 同步 骤 @@ 的 方法 向 AP Div 内 添加 Flash 动 
画 ， 并 调整 AP Div 的 大 小 ， 使 之 与 插入 的 Flash 动画 大 小 一 致 ， 播 放 该 Flash 动画 ， 效 果 


如 图 6-14 所 示 。 
EE / 


面板 的 【布局 】 类 


图 6-14 使 用 AP Div 并 在 其 中 插入 Flash 动画 


nT 


6-15 页 面 预览 效果 
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6.2.3 插入 Flash 视频 


Flash 视频 即 扩展 名 为 .flv 的 Flash 文件 ， 要 在 页 面 中 插入 Flash 视频 ， 可 单 击 【 插 入 】 
面板 的 【常用 】 类 别 下 的 【媒体 】 按 钮 组 ， 在 下 拉 选 项 中 单 击 【FLV】， 打开 【插入 FLV】 
对 话 框 ， 如 图 6-16 左 图 所 示 。 

在 【视频 类 型 】 下 拉 列 表 框 中 选择 视频 的 类 型 ， 如 【累进 式 下 载 视频 】 或 【 流 媒体 】。 
然后 在 下 方 的 【URL) 文本 框 中 设置 视频 的 路 径 和 名 称 ， 在 【外 观 】 下 拉 列 表 框 中 选择 视 
频 播放 器 的 外 观 界面 。 单 击 【 检 测 大 小 】 按 钮 ， 可 自动 获取 选择 的 视频 文件 的 宽度 和 高 度 。 
但 建议 用 户 手 动 输入 ， 因 为 可 能 有 时 无 法 自动 检测 Flash 视频 的 大 小 。 单 击 【 确 定 】 按 钮 ， 
即 可 在 页 面 中 插入 Flash 视频 ， 在 浏览 器 中 预览 ， 效 果 如 图 6-16 右 图 所 示 。 
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6-16 在 网 页 中 使 用 Flash 视频 


6.2.4 插入 FlashPaper 


FlashPaper 是 一 种 特殊 的 Flash 对 象 ， 是 一 种 类 似 于 Word 的 动画 文件 ， 可 通过 
Macromedia FlashPaper 软件 来 制作 。 

很 多 情况 下 ,用 户 希 望 将 Word 文档 、PowerPoint 文档 或 是 Excel 文档 放 到 网 页 中 发 布 ， 
但 希望 禁止 他 人 编辑 、 修 改 。 此 时 ， 便 可 以 将 这 些 文档 制作 成 FlashPaper。FlashPaper 与 普 
通 的 Flash 动画 有 所 不 同 ， 普 通 的 Flash 动画 只 能 观看 或 添加 超级 链接 ， 而 FlashPaper 不 仅 
能 够 观看 ， 还 可 以 在 其 中 翻 页 、 缩 放 、 搜 索 ， 复 制 其 中 的 文本 或 者 打印 。 

要 在 页 面 中 使 用 FlashPaper， 可 首先 将 光标 置 于 要 插入 FlashPaper 的 位 置 ， 然 后 单 击 
【插入 】 面 板 的 【常用 】 类 别 下 的 【媒体 】 按 钮 组 ， 在 下 拉 选 项 中 单 击 【FlashPaper】， 打 
开 【 插 入 FlashPaper】 对 话 框 ， 如 图 6-17 左 图 所 示 。 


ee 


。 第 6 章 添加 多 媒体 元 素 。 


单 击 【 源 】 文 本 框 右 侧 的 【浏览 】 按 钮 ， 选 择 要 插入 的 FlashPaper 文件 ， 然 后 设置 
FlashPaper 文档 在 网 页 中 显示 范围 的 宽度 和 高 度 。 单 击 【 确 定 】 按 钮 ， 保 存 并 预览 网 页 ， 
效果 如 图 6-17 右 图 所 示 。 
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图 6-17 在 页 面 中 使 用 FlashPaper 


全 如 何 将 Word、PowerPoint 或 是 Excel 文档 转换 成 FlashPaper? 
NS 用 户 需 要 安装 专门 用 来 制作 FlashPaper 的 软件 ， 如 Macromedia FlashPaper。 安 装 了 该 软件 


后 ,系统 会 自动 增加 一 个 名 为 Macromedia FlashPaper 的 打印 机 。 在 Word、PowerPoint 或 是 Excel 
等 应 用 程序 中 ， 使 用 该 打印 机 对 文档 进行 打印 ， 即 可 制作 成 FlashPaper 文档 。 


6.3 添加 其 他 媒体 对 象 


在 Dreamweaver 网 页 文档 中 , 除了 可 以 插入 Flash 媒体 元 素 外 , 还 可 以 插入 Shockwave 
影片 、Java Applet、ActiveX 控件 。 


6.3.1 插入 Shockwave 电影 


Shockwave 多 媒体 格式 是 Macromedia 公司 制订 的 一 种 用 于 在 Web 上 进行 媒体 交互 的 
标准 。Shockwave 影片 的 压缩 格式 文件 比较 小 ， 可 以 使 用 Macromedia Director 来 制作 ， 能 
够 在 大 多 数 浏览 器 中 播放 ， 并 且 可 以 被 快速 下 载 。 

播放 Shockwave 电影 必须 使 用 相应 的 播放 器 ， 在 Netscape Navigator 中 ， 通 过 插件 来 
实现 。 在 Internet Explorer 中 ， 则 通过 ActiveX 控件 来 实现 。 当 在 页 面 中 插入 Shockwave 
电影 时 ，Dreamweaver 使 用 <object> 和 <embed> 标 记 来 实现 它们 在 浏览 器 中 的 正确 播放 。 

要 插入 Shockwave 电影 ， 可 单 击 【插入 】 面 板 的 【常用 】 类 别 下 的 【媒体 】 按 钮 组 ， 
从 下 拉 选 项 中 单 击 【Shockwave】 按 钮 ， 在 打开 的 【选择 文件 】 对 话 框 中 选择 要 插入 的 
Shockwave 电影 文件 ， 单 击 【确定 】 按 钮 即 可 将 其 插入 到 光标 所 在 位 置 。 在 Shockwave 的 
属性 检查 器 中 ， 可 设置 Shockwave 对 象 的 大 小 、 边 距 等 。 保 存 并 预览 页 面 ， 效 果 如 图 6-18 
所 示 。 
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6-18 ”预览 Shockwave 影片 播放 效果 


6.3.2 插入 Java Applet 


Java Applet 是 一 种 动态 、 安 全 、 跨 平台 的 网 络 应 用 程序 ， 扩 展 名 通常 为 .class， 经 常 被 
巾 入 到 HTML 语言 中 ， 用 于 实现 诸如 飘动 的 文本 、 下 雪 等 动态 效果 。 

例 6-5 利用 Java Applet 显示 彩虹 文字 。 

和 @ 将 光标 置 于 要 插入 Java Applet 的 位 置 , 单 击 【 插 入】 面板 的 【常用 】 类 别 下 的 【 媒 
体 】 按 钮 组 ， 从 下 拉 选 项 中 单 击 【APPLET】， 打开 【 选 择 文件 】〗 对 话 框 ， 选 择 要 插入 的 
Java Applet， 如 图 6-19 所 示 。 

@@ 单 击 【确定 】 按钮 , 在 打开 的 【Applet 标签 辅助 功能 属性 】 对 话 框 中 将 【替换 文本 】 
设置 为 “彩虹 文字 ”， 如 图 6-20 所 示 。 

加 单 击 【 确 定 】 按 钮 ， 完 成 Java Applet 的 插入 。 保 持 Java Applet 的 选中 状态 ， 在 属 
性 检查 器 中 设置 Java Applet 的 宽度 和 高 度 为 297、48。 

人 @ 在 属性 检查 器 中 单 击 【 参 数 】 按 钮 ， 在 打开 的 【参数 】 对 话 框 中 设置 参数 ， 如 图 
6-21 所 示 。 


6-19 ”插入 Java Applet 6-20 设置 替换 文本 


@@ 保存 并 预览 页 面 ， 效 果 如 图 6-22 所 示 。 


ez 


图 6-21 设置 Java Applet 的 参数 6-22 ”预览 彩虹 文字 效果 


由 例 6-6 可 以 看 出 , 在 页 面 中 使 用 Java Applet 分 两 个 步骤 : 首先 设置 Java Applet 的 属 
性 ， 如 width、height、code 等 ， 然 后 设置 Java Applet 的 参数 ， 即 在 【参数 】 对 话 框 中 设 
置 的 值 。 另 外 ， 每 个 Java Applet 的 参数 是 不 同 的 ， 设 置 参数 时 需要 参照 使 用 说 明 。 


网 为 什么 我 的 浏览 器 无 法 显示 Java Applet? 

气 首先 ， 用 户 需 要 下 载 Java 虚拟 机 。 然 后 ， 降 低 IE 浏览 器 的 安全 级 别 。 具 体 方法 如 下 : 在 
下 主 界面 选择 【工具 】|【 管 理 加 载 项 】|【 启 用 或 禁用 加 载 项 】 命 令 ， 在 打开 对 话 框 的 下 拉 列 
表 中 选择 【Internet Explorer 中 当前 加 载 的 加 载 项 】 ， 此 时 就 可 以 在 列表 中 看 到 【Sun Java 控制 


台 】〗， 启 用 该 加 载 项 ， 重启 正 浏览 器 即 可 。 

对 于 使 用 Maxthon( 邀 游 ) 的 用 户 而 言 ， 默 认 情况 下 ，Maxthon 使 用 Microsoft 的 JVM， 因 此 
一 些 Applet 也 可 能 无 法 正常 显示 。 在 Maxthon 主 界面 选择 【工具 】|【 邀 游 设置 中 心 】 命 令 ， 
在 【高 级 选项 】 中 找到 【Java 虚拟 机 】, 并 启用 【系统 安装 的 其 他 Java 虚拟 机 】, 重启 Maxthon 
即 可 。 


6.3.3 插入 ActiveX 控件 


ActiveX 控件 即 OLE 控件 , 是 一 种 可 以 重复 使 用 的 组 件 , 能 够 在 Internet Explorer 浏览 
器 中 运行 ， 但 不 能 运行 在 Netscape Navigator 浏览 器 中 。 

要 插入 ActiveX 控件 ， 可 单 击 【 插 入 】 面 板 的 【常用 】 类 别 下 的 【媒体 】 按 钮 组 ， 从 
下 拉 选 项 中 单 击 【ActiveX】， 即 可 在 页 面 中 插入 一 个 ActiveX 控件 。ActiveX 控件 的 编写 、 
安装 、 调 用 等 比较 复杂 ， 需要 读者 具备 一 定 的 编程 知识 。 关 于 ActiveX 控件 的 更 详细 内 容 ， 
请 读者 参阅 相关 高 级 书籍 。 


本 章 小 结 


本 章 介 绍 了 如 何在 页 面 中 添加 音频 、Flash 动画 、Shockwave 电影 、Java Applet 等 多 媒 
体 元 素 ， 以 丰富 网 页 的 内 容 , 给 访客 更 好 的 视听 享受 。Flash 动画 是 网 页 中 最 常用 到 的 动态 
元 素 ， 读 者 应 重点 把 握 。Java Applet、ActiveX 等 对 象 ， 建 议 读者 不 要 在 页 面 中 过 多 使 用 ， 
因为 它们 需要 客户 端 额外 安装 一 些 插件 或 应 用 程序 ， 另 外 还 可 能 存在 兼容 问题 。 下 一 章 向 
读者 介绍 如 何在 网 页 中 使 用 行为 。 
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习 题 
填空 题 
1. 以 行为 方式 为 页 面 对 象 设置 的 音乐 ， 实 际 上 是 以 的 形式 在 页 面 中 存在 的 。 
2. Flash 是 一 种 高 质量 、 高 压缩 率 的 动画 ， 具 有 超 强 的 交互 能 力 ， 是 网 页 中 应 用 最 为 广泛 的 动态 
元 素 之 一 。 
3. 常见 的 Flash 动画 有 两 种 : 一 种 是 普通 动画 ， 一 种 是 
4. Flash 视频 即 扩展 名 为 的 Flash 文件 。 


5. 很 多 情况 下 ， 用 户 希 望 将 Word 文档 、PowerPoint 文档 或 是 Excel 文档 放 到 网 页 中 发 布 ， 但 希望 禁止 
他 人 编辑 、 修 改 。 此 时 ， 便 可 以 将 这 些 文档 制作 成 

6. Shockwave 影片 的 压缩 格式 文件 比较 小 ， 可 以 使 用 _ 来 制作 ， 能 够 在 大 多 数 浏览 器 中 播放 ， 并 
且 可 以 被 快速 下 载 。 


7. 是 一 种 动态 、 安 全 、 跨 平台 的 网 络 应 用 程序 ， 扩 展 名 通常 为 .class。 
选择 题 
8. 网 页 中 常用 的 Flash 动画 ， 其 扩展 名 为 ( )。 
A. .fla B. .swf C. .swt D. flv 
简 答题 


9. 简 述 网 页 中 支持 的 音频 格式 ， 以 及 它们 的 区 别 。 

10. 使 用 Flash 文本 可 以 达到 什么 效果 ? 

11. 使 用 Java Applet 的 步骤 是 什么 ? 参数 可 以 随便 设置 吗 ? 

上 机 操作 题 

12. 练习 在 网 页 中 插入 Flash 动画 、Flash 影片 的 方法 ， 效 果 如 图 6-23 所 示 。 
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图 6-23 ”页面 效果 
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第 7 章 


本 章 介绍 在 网 页 中 使 用 行为 的 方法 和 技巧 。 通过 本 章 的 学 习 , 应 该 完成 以 下 学 习 目 标 : 
太 YY 了 解 行为 、 事 件 、 动 作 的 概念 

YY 熟悉 【行为 】 面 板 

JY 学 会 在 页 面 中 添加 和 编辑 行为 

YY 学 会 使 用 Dreamweaver 常用 的 内 置 行为 


7.1 了 解 行为 


Dreamweaver 行为 是 当 被 一 个 特定 事件 (如 单 击 鼠 标 ) 触 发 时 ， 执 行 一 个 动作 (如 打开 一 
个 浏览 器 窗口 ) 的 JavaScript 代码 。 通 过 在 页 面 中 添加 行为 ， 可 以 实现 许多 网 页 特效 ， 增 强 
页 面 的 交互 性 。 


7.1.1 事件 和 动作 


在 网 页 中 ， 事 件 是 浏览 器 生成 的 消息 ， 表 明 该 页 面 的 访问 者 执行 了 某 种 操作 。 例 如 ， 
当 访 问 者 将 光标 移动 到 某 个 超 链接 上 时 ， 浏 览 器 为 该 链接 生成 了 一 个 onMouseOver 事件 。 
不 同 的 网 页 元 素 定义 了 不 同 的 事件 。 在 大 多 数 浏 览 器 中 ，onMouseOver 和 onClick 是 与 链 
接 关联 的 事件 ， 而 onLoad 是 与 图 像 和 文档 的 body 部 分 关联 的 事件 。 

事件 由 浏览 器 定义 、 产 生 和 执行 。 表 7-1 列 出 了 Dreamweaver 中 的 一 些 主要 事件 。 其 
中 ，NS 代表 Netscape 浏览 器 ,IE 代表 Internet Explorer 浏览 器 ， 后 面 的 数值 表示 支持 该 事 
件 的 最 低 版 本 。 


表 7-1 Dreamweaver 常见 的 一 些 事件 
事 件 说 明 


单 击 选 定 页 面 元 素 (如 超 链接 、 图 片 、 图 片 影像 、 按 钮 等 ) 将 触发 该 


Click(NS3、 IE3 
onClick( ) 事件 


onDblClick(NS4、IE4) 双击 选 定 的 元 素 将 触发 该 事件 


onMouseDown(NS4、IE4) | 当 用 户 按 下 鼠标 时 触发 该 事件 


onMouseMove(NS3、IE4) 当 光 标 停 留 在 对 象 边界 内 时 触发 该 事件 


款 姓 荔 亚 


onMouseQut(NS3、IE4) 当 光 标 离 开 对 象 边 界 时 触发 该 事件 
onMouseOver(NS、IE3) 当 移 动 光标 首次 指向 特定 对 象 时 触发 该 事件 ， 该 事件 常用 于 超 链 接 


onMouseUp(NS4、IE4) 当 按 下 的 鼠标 按键 被 释放 时 触发 该 事件 
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( 续 表 ) 
事 件 说 明 
键 onKeyPress(NS4、 IE4) 当 用 户 按 下 并 释放 任意 键 时 触发 该 事件 
盘 
事 onKeyDown(NS4、 IE4) 当 用 户 按 下 任意 键 时 触发 该 事件 
件 onKeyUp(NS4、 IE5) 当 用 户 释 放 按 键 时 触发 该 事件 
改变 表单 中 数值 时 将 触发 该 事件 。 例 如 ， 当 用 户 在 表单 中 修改 了 某 
onChange(NS3、IE3) 本 
个 文本 框 中 的 值 ， 然 后 在 页 面 的 任何 位 置 单 击 可 触发 该 事件 
当 指定 元 素 成 为 焦点 时 触发 该 事件 。 例 如 ， 单 击 表单 中 的 文本 框 将 
表 | onFocus(NS3、IE3) i 
单 触发 该 事件 
当 特 定 元 素 停止 作为 用 户 交互 的 焦点 时 触发 该 事件 。 例 如 ， 当 用 户 
事 | onBlur(NS3、IE3) i 
件 在 单 击 文本 框 后 ， 单 击 文 本 框 以 外 的 区 域 ， 则 触发 该 事件 
在 文本 区 域 选中 文本 时 触发 该 事件 
onSubmit(NS3、IE3) 确认 表单 时 触发 该 事件 


褒 妈 于 洁 


onReset(NS3、IE3) 
onLoad(NS3、IE3) 
onError(NS3、IE4) 
onMove(NS4、IE5) 
onResize(NS4、IE5) 


onScroll(NS4、IE5) 


当 表 单 被 复位 到 其 默认 值 时 触发 该 事件 

当 图 片 或 页 面 完成 装载 后 触发 该 事件 

离开 页 面 时 触发 该 事件 

在 页 面 或 图 片 发 生 装载 错误 时 ， 触 发 该 事件 
移动 窗口 或 框架 时 触发 该 事件 

当 用 户 调整 浏览 器 窗口 或 框架 尺寸 时 触发 该 事件 
当 用 户 上 、 下 滚动 时 触发 该 事件 


动作 是 预先 编写 的 JavaScript 代码 ， 这 些 代码 执行 特殊 的 任务 ， 例 如 打开 浏览 器 窗口 、 
显示 或 隐藏 层 、 播 放声 音 或 停止 Macromedia Shockwave 影片 。 当 事件 发 生 后 ， 浏 览 器 就 查 
看 是 否 存在 与 该 事件 对 应 的 动作 ， 如 果 存 在 ， 就 执行 它 ， 这 就 是 整个 行为 的 过 程 。 


7.1.2” Dreamweaver 内 置 行为 


Dreamweaver CS4 提供 了 20 多 个 内 置 行为 ， 基 本 上 满足 了 网 页 设计 的 需要 ， 如 表 7-2 
所 示 。 用 户 也 可 以 在 Macromedia Exchange Web 站 点 以 及 第 三 方 开发 人 员 站 点 上 找到 更 多 
的 行为 。 如 果 精 通 JavaScript， 用 户 还 可 以 编写 自己 的 行为 。 


表 7-2 ” Dreamweaver 内置 行 为 


le_ 


行 ” 为 说 明 
可 以 使 浏览 器 下 载 那些 尚未 在 网 页 中 显示 但 是 可 能 显示 的 图 像 ， 并 将 之 存 
预先 载 入 图 像 
图 储 到 本 地 缓存 中 ， 以 便 脱 机 浏览 
像 用 于 动态 改变 图 像 对 应 <img> 标 记 的 scr 属性 , 利用 该 行为 , 不 仅 可 以 创建 
操 | 交换 图 像 普通 的 翻转 图 像 ， 还 可 以 创建 图 像 按钮 的 翻转 效果 ， 甚 至 可 以 设置 在 同一 
作 时 刻 改 变 页 面 上 的 多 幅 图 像 
a - i 
ge 将 所 有 被 普 换 显 示 的 图 像 恢复 为 原始 图 像 ， 一 般 来 说 在 设置 交换 图 像 和 
为 时 ， 会 自动 添加 该 行为 
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( 续 表 ) 
行 为 说 明 
可 以 创建 或 编辑 弹出 ， 或 者 打开 并 修改 已 经 插入 到 文 的 
显示 弹出 式 菜 单 可 以 创 弹出 式 菜单 ， 或 者 打开 并 修改 已 经 插入 到 页 面 文档 中 的 弹 
菜 出 式 菜单 
可 以 将 显示 的 弹出 隐藏 , 一 说 , 在 设置 显示 弹出 行为 时 ， 
单 隐藏 弹出 式 菜单 局 有 式 菜单 隐藏 , 一 般 来 说 , 在 设 示 弹 出 式 菜单 行为 
导 会 自动 添加 该 行为 
航 | 跳 转 菜单 用 来 创建 和 编辑 跳 转 菜单 
类 | 跳 转 菜单 开始 创建 了 跳 转 菜单 后 ， 需 要 使 用 该 行为 使 跳 转 菜单 中 的 按钮 具有 跳 转 功能 
设置 导航 栏 图 像 用 于 对 导航 栏 中 的 图 像 进行 编辑 ， 或 是 对 图 像 状态 进行 更 多 的 控制 
检查 浏览 器 可 以 获取 访客 浏览 网 页 时 所 使 用 的 浏览 器 类 型 
检 检查 表单 为 表单 中 的 文本 框 设 置 有 效 性 规则 ， 检 查 文本 框 中 的 内 容 是 否 有 效 ， 以 确 
查 保 用 户 输入 了 正确 的 数据 
类 检查 插 伯 可 以 检查 访客 在 浏览 网 页 时 ， 其 浏览 器 中 是 否 安装 有 指定 的 插件 ， 以 便 为 
安装 插件 和 未 安装 插件 的 用 户 分 别 显示 不 同 的 页 面 
可 以 动态 地 设置 框架 中 的 文本 ， 或 是 替换 框架 内 容 。 这 些 新 设置 的 内 容 可 
设 | 设置 框架 文本 ER a 
置 以 是 任意 的 HTML 内 容 ， 因 此 可 以 利用 该 行为 动态 地 显示 各 种 信息 
县 设置 文本 域 文本 用 于 动态 地 设置 文本 编辑 区 中 的 内 容 
在 浏览 器 窗口 的 左下 端 状 态 行 上 ， 通 常会 显示 当前 状态 的 提示 信息 。 使 用 
本 | 设置 状态 栏 文本 
类 该 行为 可 以 重新 设置 状态 行 上 的 提示 信息 
设置 容器 的 文本 可 以 动态 地 设置 网 页 中 Div 容器 中 的 文本 ， 或 蔡 换 容器 中 的 内 容 
时 实现 在 页 面 上 对 AP Div 及 其 中 的 内 容 进行 移动 ， 以 实现 一 些 特殊 的 页 面 
拖 动 AP 元 素 
控 效果 
制 | 控制 Shockwave 
用 于 对 Shockwave 或 Flash 动画 进行 控制 ， 如 播放 、 停 止 、 返 回 等 
类 | 或 SWF 
显示 -隐藏 元 素 在 页 面 上 显示 、 隐 藏 Div 元 素 ， 或 恢复 默认 的 Div 可 见 状态 
、 . 使 用 户 可 以 设置 当 某 些 事件 被 触发 时 调用 相应 的 JavaScript 代码 ， 以 实现 
调用 JavaScript 
相应 的 动作 
动态 9 ， Di 颜色 ， 图 像 的 
其 | 改变 属性 ea 例如 改变 Div 的 背景 颜色 ， 改 变 图 像 的 大 
人 二 到 可 以 设置 在 当前 浏览 器 窗口 或 指定 的 框架 窗口 中 载 入 指定 的 页 面 ， 该 行为 
为 在 同时 改变 两 个 或 多 个 框架 内 容 时 特别 有 用 
打开 浏览 器 窗口 可 以 动态 地 设置 网 页 中 Div 容器 中 的 文本 ， 或 替换 容器 中 的 内 容 
播放 声音 用 于 在 网 页 中 播放 声音 
弹出 信息 在 网 页 中 显示 信息 对 话 框 ， 起 到 提示 信息 的 作用 
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7.1.3 添加 与 编辑 行为 


在 页 面 中 应 用 一 个 行为 需要 3 步 ; 

和 @ 选择 想 要 触发 行为 的 页 面 元 素 。 

加 选择 要 应 用 的 行为 。 

介 指定 行为 的 设置 或 参数 。 

触发 行为 的 页 面 元 素 可 以 是 一 个 被 链接 元 素 、 一 系列 文本 或 一 个 图 像 ， 设 置 是 整个 页 
面 文档 ， 而 能 否 附 加 该 行为 则 由 浏览 器 决定 。 所 有 的 行为 都 通过 【行为 】 面 板 来 插入 到 页 
面 中 ， 选 择 【 窗 口 】|【 行 为 】 命 令 ， 可 打开 【行为 】 面 板 ， 如 图 7-1 所 示 。 

要 添加 行为 ， 需 要 首先 选中 要 使 用 行为 的 页 面 元 素 ， 然 后 单 击 【 行 为 】 面 板 上 的 【 添 
加 行为 】 按 钮 | 二 jj， 在 弹出 的 菜单 中 单 击 要 添加 的 行为 ， 如 图 7-2 所 示 。 不 同 的 行为 会 打开 
不 同 的 对 话 框 ， 设 置 好 参数 后 ， 单 击 【 确 定 】 按 钮 即 可 完成 行为 的 添加 。 
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于 了 更 志 条 为 
图 7-1 【行为 】 面 板 图 7-2 添加 行为 


提示 : 【行为 】〗 面 板 中 默认 显示 了 所 有 事件 ， 单 击 按钮 ， 可 只 显示 已 设置 的 事件 。 

在 【行为 】 面 板 中 ， 用 户 可 以 发 现 ， 并 不 是 所 有 的 行为 都 一 直 是 可 用 的 。 例 如 在 使 用 
交换 图 像 行 为 之 前 , 用 户 需 要 首先 选择 页 面 中 的 一 个 图 片 。 添加 好 的 行为 将 显示 在 【行为 】 
面板 中 ， 例 如 图 7-1 中 显示 了 【预先 载 入 图 像 】 行 为 。 左 栏 显示 默认 的 触发 事件 ， 右 栏 显 
示 行 为 的 名 称 。 从 列表 中 选择 不 同 的 事件 ， 就 会 出 现 不 同 的 行为 。 例 如 ， 默 认 情 况 下 显示 
-隐藏 行为 会 应 用 onClick 事件 。 

如 果 用 户 对 添加 的 行为 不 满意 ， 可 以 对 其 进行 修改 ， 包 括 对 事件 的 修改 和 对 行为 本 身 
的 修改 。 修 改 事件 的 方法 是 在 事件 列表 中 重新 选择 所 需 的 事件 ， 如 图 7-3 所 示 。 修 改行 为 
的 方法 是 首先 选中 该 行为 ， 然 后 双击 动作 名 称 ， 打 开行 为 对 话 框 ， 对 参数 进行 重新 设置 即 
可 ， 如 图 7-4 所 示 。 


Ee 


图 7-3 修改 事件 


图 7-4 修改 行为 
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为 。 


行为 是 极其 灵活 的 ， 多 种 行为 能 应 用 到 同一 触发 事件 中 。 例 如 ， 可 以 将 一 个 图 像 交换 
为 另 一 个 ， 然 后 改变 伴随 图 像 的 标题 文本 ， 这 些 只 需要 一 个 鼠标 单 击 事件 。 尽 管事 件 发 生 
得 很 快 ， 似 乎 是 同时 发 生 的 ， 但 事实 上 ， 行 为 是 按 先 后 顺序 被 触发 的 。 当 应 用 具体 到 同一 
触发 事件 的 多 种 行为 时 ， 行 为 的 发 生 顺 序 将 按照 【行为 】 面 板 中 列 出 的 先后 顺序 来 执行 。 
用 户 可 以 通过 按钮 . 邻 , 和 | 来 调节 行为 在 【行为 】 面 板 中 的 顺序 。 


7.2 在 页 面 中 应 用 行为 


本 节 指 导读 者 在 页 面 中 如 何 应 用 行为 。 首 先 预览 已 完成 的 页 面 ， 移 动 光标 经 过 右 侧 的 
每 个 小 图 像 时 ， 左 侧 将 显示 与 之 对 应 的 大 图 像 ， 以 给 访客 增强 的 视觉 效果 ， 如 图 7-5 所 示 。 
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图 7-5 交换 图 像 效 果 


移动 光标 经 过 右 侧 每 个 小 图 像 下 方 的 问题 标记 ， 可 看 到 出 现 的 内 嵌 在 图 片 中 的 标题 ， 
如 图 7-6 所 示 ， 移 走光 标 标题 文字 即 被 隐藏 。 单 击 每 个 图 片 下 面 的 放大 标记 ， 可 打开 新 的 
浏览 器 窗口 ， 出 现 与 之 相对 应 的 放大 图 像 ， 如 图 7-7 所 示 。 
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图 7-6 显示 隐藏 的 图 片 标题 图 7-7 在 新 窗口 中 放大 图 片 


提示 : 在 使 用 IE 浏览 器 预览 网 页 内 容 时 ， 浏 览 器 顶部 会 出 现 一 条 表示 JavaScript 被 
限制 运行 的 信息 ， 用 户 可 单 击 信息 栏 ， 选 择 【 人 允许 阻止 的 内 容 】 命 令 ， 以 正常 显示 页 面 。 


7.2.1 应 用 交换 图 像 行为 


网 页 上 最 常用 的 效果 之 一 就 是 鼠标 经 过 图 像 。 在 鼠标 经 过 图 像 效果 中 ， 当 访客 的 光标 
移动 并 经 过 一 个 特定 的 图 像 时 ， 相 应 的 就 会 出 现 一 个 不 同 的 图 形 。 在 覆盖 状态 下 ， 鼠 标 经 
过 图 像 基 本 上 就 是 将 一 种 图 像 源 交换 为 另 一 种 图 像 源 的 行为 。Dreamweaver 的 交换 图 像 行 
为 能 处 理 比 鼠标 经 过 图 像 更 多 的 动作 。 

例 7-1 在 网 页 中 使 用 交换 图 像 行为 。 

@ 打开 本 书 提供 的 素材 文件 ,在 Dreamweaver 中 打开 start 网 页 文档 ， 如 图 7-8 所 示 。 
交换 图 像 行 为 要 求 使 用 一 个 独特 的 名 称 来 识别 目标 图 像 ， 现 在 首先 来 添加 这 些 名 称 。 
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7-8 打开 start 页 面 文档 


加 选择 页 面 左 侧 的 图 像 ， 在 属性 检查 器 中 , 将 图 像 标识 为 mediumImage， 如 图 7-9 所 
示 。 用 同样 的 方法 分 别 将 右 侧 3 个 图 像 标 识 为 topImage、middleImage 和 bottomImage。 

© 选择 图 像 topImasge， 在 属性 检查 器 的 【链接 】 文 本 框 中 输入 “javascript:;” ， 然 后 
按 Tab 键 。“javascript:;” 的 作用 是 调用 没有 功能 的 Javascript 函数 ， 要 确保 输入 了 尾随 的 
冒号 和 分 号 。 
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图 7-9 标识 图 像 
人 @ 下 面 来 选择 触发 元 素 。 从 标签 选择 器 中 选择 topImage 旁 的 标记 <a>， 如 图 7-10 所 


示 。 选 择 【 窗 口 】|【 行 为 】 命 令 , 打开 【 行 
单 中 单 击 【 交 换 图 像 】 命 令 。 


为 】 面 板 。 单 击 【 添 加 行为 】 按 钮 ， 从 下 拉 菜 


人 @ 在 打开 的 【交换 图 像 ] 对话 框 中 , 滚动 【图 像 ] 列表 , 选中 【图 像 “mediumImage”】， 


如 图 7-11 所 示 。 


中 国人 有 -关门 七 件 事 ， 间 ,水 、 油 , 芍 , 访 、 栓 ,和 东 
所 在 一 个 风 加 日 田 ， Bt 吉 和 1 折 一 天 。 前 蔡 雪 于 儿 康 去 想 山 ， 突然 对 得 口 


片 震 叶 如 至 限 前 ， 扒 配 来 一 看， 用 手 一 揽 ， 巡 得 填 琢 拔 骨 ， 用 舌头 一 纺 , 


是 本 天 中 二 梧 : 


站 
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图 7-10 选择 触发 元 素 


@@ 单 击 【 浏 览 】 按钮， 在 打 
图 像 topImage 的 原始 图 片 ， 如 图 7-12 所 示 。 


人 单 击 【确定 】 按钮, 确保 选中 【预先 载 入 图 


关闭 【交换 图 
7-13 所 示 。 


像 】 对 话 框 。 交 换 图 像 和 恢复 


交 理 遍 才 时 入 mw ve 
页 台 和 2 各 和 医 雪 
人 


图 7-11 【交换 图 像 】 对 话 框 


的 【选择 图 像 源 文件 】 对 话 框 中 导航 到 图 像 1jpg， 即 


像 】 和 【鼠标 滑 开 时 恢复 图 像 】 复 选 框 ， 
交换 图 像 行为 将 出 现在 【行为 】 面 板 中 ， 如 图 
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7-12 


为 交换 图 像 选择 原文 件 


图 7-13 应 用 的 交换 图 像 和 恢复 交 
换 图 像 行为 


使 用 行为 。 
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从 用 同样 的 方法 为 middleImage 和 bottomImage 应 用 图 像 交 换行 为 ， 最 后 保存 页 面 。 
7.2.2 ”应 用 打开 浏览 器 窗口 行为 


弹出 窗口 (从 主 浏览 器 页 面 打 开 的 较 小 的 浏览 器 窗口 ) 是 网 页 中 应 用 比较 广泛 的 一 个 效 
果 ， 通 过 Dreamweaver 的 打开 浏览 器 窗口 行为 ， 可 以 对 弹出 窗口 的 外 观 进行 精确 控制 。 

例 7-2 在 网 页 中 使 用 打开 浏览 器 窗口 行为 。 

入 继续 例 7-1。 将 光标 置 于 topImage 所 在 的 单元 格 中 ( 右 侧 的 3 个 图 片 是 放置 在 一 个 
表格 中 的 )， 在 属性 检查 器 中 单 击 【 拆 分 单元 格 为 行 或 列 】 按 钮 BB， 将 单元 格 拆 分 成 两 行 。 
此 时 ， 图 片 topImage 将 自动 位 于 第 一 行 中 ， 光 标 停 留 在 第 二 行 中 。 

加 单 击 【 插 入】 面板 的 【常用 】 类 别 下 的 【图 像 】 按 钮 组 ,在 下 拉 按 钮 中 单 击 【 图 像 】 
选项 ， 在 第 二 行 中 插入 表示 问题 和 放大 标记 的 图 标 。 将 光标 置 于 这 两 个 图 标 之 间 ， 按 
Ctrl+Shift+ 空 格 键 ， 在 图 标 之 间 插 入 空格 ， 效 果 如 图 7-14 所 示 。 

加 用 同样 的 方法 拆 分 middleImage 和 bottomImage 图 片 所 在 的 单元 格 , 并 分 别 插入 表 
示 问 题 和 放大 标记 的 图 标 。 

@@ 选择 topImage 图 像 下 的 放大 标记 修 ， 在 属性 检查 器 的 【链接 】 文 本 框 中 输入 

“javascript:;”， 然 后 按 Tab 键 。 

人 @ 在 【行为 ] 面板 中 , 单 击 【 添 加 行为 】 按 钮 ， 从 弹出 菜单 中 单 击 【打开 浏览 器 窗口 】 
行为 。 在 打开 的 对 话 框 中 单 击 【浏览 〗 按 钮 ， 选 择 topImage 的 原始 图 像 文 件 ， 如 图 7-15 
所 示 。 


图 7-14 拆 分 单元 格 并 插入 图 标 图 7-15 【打开 浏览 器 窗口 】 对 话 框 


人 @ 根据 原始 图 片 的 大 小 ,调整 【窗口 宽度 】 和 【窗口 高 度 】 中 的 值 ， 选 中 【地 址 工具 
栏 】 复 选 框 ， 关闭 【打开 浏览 器 窗口 】 对 话 框 。 

@ 用 户 不 必 为 middleImage 和 bottomImage 重复 相同 的 步 又。 选中 topImage 下 的 放大 
图 标 , 按 Ctrl+C 键 对 其 复制 。 然 后 选中 middleImage 下 的 放大 图 标 , 按 Ctrl+V 键 进行 粘贴 。 

人 @ 由 于 topImage 和 middleImage 的 原始 图 片 大 小 不 一 样 ,下面 来 对 middleImage 的 打 
开 浏 览 器 窗口 行为 进行 修改 。 在 【行为 】 面 板 中 双击 middleImage 的 打开 浏览 器 窗口 行为 ， 
打开 【打开 浏览 器 窗口 】 对 话 框 ， 重 新 选择 图 片 ， 并 更 改 浏览 器 窗口 的 宽度 和 高 度 设置 即 
可 。 用 同样 的 方法 为 bottomImage 应 用 打开 浏览 器 窗口 行为 。 最 后 保存 文件 。 


7.2.3 ”应 用 显示 -隐藏 元 素 行为 
利用 显示 -隐藏 元 素 行为 , 设计 人 员 可 以 根据 实际 情况 有 选择 地 在 页 面 上 显示 一 些 页 面 
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元 素 ， 当 情况 发 生 改 变 时 ， 便 可 以 隐藏 这 些 元 素 。 例 如 ， 如 果 访 客 属于 VIP 用 户 ， 则 向 其 
提供 一 些 高 级 服务 ， 否 则 不 在 页 面 上 显示 这 些 服务 内 容 ， 访 客 也 就 无 从 访问 。 

例 7-3 在 网 页 中 使 用 显示 -隐藏 元 素 行为 。 

入 继续 例 7-2。 单 击 【 插 入 】 面 板 的 【布局 】 类 别 下 的 【绘制 AP Div】 按 钮 ， 在 图 像 
topImage 上 绘制 一 个 AP Div, 在 属性 检查 器 将 其 命名 为 topapDiv, 然后 在 该 容器 内 输入 文 
字 “ 茶 艺 表演 之 一 ”， 设置 字体 和 颜色 ， 如 图 7-16 所 示 。 el 

各 将 【文档 】 窗 口 切换 到 拆 分 视图 ， 选择 topImage 下 的 问题 标记 让 ， 利 用 代码 视图 
确保 同时 选中 了 问题 标记 后 面 的 两 个 连续 空 

注意 : 之 所 以 要 同时 选中 问题 标记 后 面 的 两 个 连续 空格 ， 是 由 于 显示 -隐藏 行为 由 
onMouseOver 和 onMouseOnut 事件 触发 , 扩大 的 目标 区 域 可 以 使 行为 更 容易 使 用 。 在 代码 
视图 中 ， 空 格 的 代码 标记 是 “&nbsp”。 

各 在 属性 检查 器 的 【链接 】 文 本 框 中 输入 “javascript:;”， 然 后 按 Tab 键 。 在 【行为 】 
面板 中 单 击 【 添 加 行为 】 按 钮 ， 从 弹出 菜单 中 单 击 【 显 示 - 隐 藏 元 素 】 行 为 ， 打 开 【 显 示 - 
隐藏 元 素 】 对 话 框 ， 如 图 7-17 所 示 。 


.a 
图 7-16 创建 图 片 的 标题 文本 


人 @ 从 【元 素 】 列 表 中 选中 【div"topapDiv"】 选 项 ， 然 后 单 击 【显示 】 按 钮 。 最 后 单 击 
【确定 】 按 钮 ， 关闭 【 显 示 -隐藏 元 素 】 对 话 框 。 

加 默认 情况 下 ， 显 示 - 隐 藏 元 素 行为 将 插入 一 个 onClick 事件， 而 本 例 要 实现 的 是 一 
个 交互 的 鼠标 经 过 效果 。 在 【行为 】〗 面 板 中 ， 单 击 显 示 -隐藏 元 素 行为 左 侧 的 onClick， 然 
后 从 下 拉 列 表 中 选择 【onMouseOver】。 
@ 和 交换 图 像 行 为 不 同 ， 显 示 - 隐 藏 元 素 行为 不 包含 将 元 素 恢复 到 先前 状态 的 选项 ， 
解决 方法 是 用 一 个 不 同 的 动作 和 事件 再 次 应 用 行为 。 单 击 【 添 加 行为 】 按 钮 ， 从 弹出 菜单 
中 单 击 【显示 -隐藏 元 素 】 行 为 ， 再 次 打开 【显示 -隐藏 元 素 】 对 话 框 。 从 【元 素 】 列 表 中 
选中 【div"topapDiv"】〗 选 项 ， 然 后 单 击 【 隐 藏 】 按 钮 。 最 后 单 击 【 确 定 】 按 钮 ， 关闭 【 显 
示 - 隐 藏 元 素 】 对 话 框 。 

碟 单 击 刚刚 添加 的 行为 旁边 的 【onClick】， 将 触发 事件 更 改 为 【onMouseOut】〗， 保 
存 页 面 文档 。 


图 7-17 【显示 -隐藏 元 素 】 对 话 框 


本 章 小 结 


通过 对 本 章 的 学 习 ， 用 户 可 以 了 解 事件 和 动作 的 概念 ， 并 掌握 【行为 】 面 板 的 使 用 方 
法 ， 能 够 熟练 运用 Dreamweaver 的 内 置 行为 创建 诸如 交互 图 像 、 弹 出 窗口 、 动 态 显 示 隐 藏 
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页 面 元 素 等 网 页 特效 。 网 页 中 使 用 的 行为 一 般 都 是 在 客户 端 直接 实现 的 ， 在 Dreamweaver 
网 页 文档 中 插入 客户 端 行为 ， 实 际 上 就 是 自动 给 网 页 添加 JavaScript 代码 ， 只 是 这 些 操作 
将 由 Dreamweaver 编辑 器 自动 完成 。 下 一 章 向 读者 介绍 如 何在 页 面 中 使 用 表单 来 提交 数据 。 


习 题 

填空 题 
1. Dreamweaver 行为 是 当 被 一 个 特定 触发 时 ， 执 行 一 个 的 JavaScript 代码 。 
2. 事件 由 定义 、 产 生 和 执行 。 
3. 默认 情况 下 显示 -隐藏 行为 会 应 用 事件 。 
4. 通过 Dreamweaver 的 行为 ， 可 以 对 弹出 窗口 的 外 观 进行 精确 控制 。 
选择 题 
5. 下 列 事件 中 ， 当 用 户 按 下 鼠标 时 触发 的 是 (。 )。 

A. onClick B. onMouseDown C. onKeyPress D. onKeyDown 


6. 下 列 行为 中 ， 用 于 动态 改变 图 像 对 应 <img> 标 记 的 scr 属性 的 是 ( )。 
A. 交换 图 像 ” B. 打开 浏览 器 窗口 C. 显示 -隐藏 元 素 ”D. 检查 插件 

简 答 题 

7. 什么 是 行为 和 事件 ? 

8. 简 述 为 页 面 元 素 应 用 行为 的 过 程 。 

上 机 操作 题 

9. 继续 例 7-3。 创建 middleImage 和 bottomImage 的 标题 文本 , 分 别 置 于 middleapDiv 和 bottomapDiv 中 ， 
然后 分 别 为 它们 的 问题 标记 应 用 显示 -隐藏 元 素 行为 。 

10. 制作 一 个 网 页 文档 ， 当 访客 关闭 或 离开 页 面 时 弹出 窗口 “有 空 常 来 哦 ! ”， 如 图 7-18 所 示 。 


7-18 ”离开 页 面 时 的 弹出 信息 
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使 用 


本 章 介绍 在 网 页 中 制作 和 编辑 表单 及 表单 对 象 的 方法 与 技巧 。 通 过 本 章 的 学 习 ， 
完成 以 下 学 习 目 标 : 

i 了 解 表单 和 表单 对 象 

YY 学 会 在 页 面 中 创建 并 设置 表单 

1 学 会 在 表单 中 添加 文本 、 单 选 按钮 、 复 选 框 、 列 表 、 提 交 按钮 等 表单 对 象 

i 学 会 使 用 CSS 规则 来 设计 表单 样式 


8.1 使 用 表单 


Internet 上 存在 着 大 量 的 表单 ,表单 是 网 页 与 访客 的 一 种 交互 界面 , 主要 用 于 数据 采集 
(例如 收集 访客 的 名 称 、Email 地 址 、 调 查 表 、 留 言 簿 等 ), 也 可 以 用 于 实现 搜索 。 通 过 表单 ， 
实现 了 用 户 同 Web 站 点 服务 器 的 信息 交流 。 

8.1.1 表单 的 交互 过 程 


表单 通常 包括 两 部 分 : 一 是 描述 表单 的 HTML 源 代 码 ， 一 是 处 理 表单 中 数据 的 服务 器 
端 或 客户 端 应 用 程序 ， 可 以 是 ASP、PHP、JSP 应 用 程序 等 。 因 而 一 个 完整 的 表单 交互 分 
为 以 下 两 个 阶段 : 访客 在 表单 中 填写 数据 ， 并 提交 到 服务 器 ， 这 个 阶段 可 以 由 HTML 文档 
来 完成 ， 也 可 以 由 ASP、PHP 或 JSP 文档 来 完成 ;， 接 下 来 服务 器 的 应 用 程序 对 这 些 信息 进 


乙 


站 
于 


行 处 理 ， 例 如 验证 用 户 是 否 为 站 点 注册 用 户 或 写 入 数据 库 等 ， 如 图 8-1 所 示 。 


i 
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-站 服务 器 对 信息 

在 表单 中 输入 进行 验证 
信息 并 提交 | 
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图 8-1 表单 的 交互 过 程 
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表单 在 HTML 代码 中 使 用 <form> 标 签 来 标记 ，<form> 标 签 包含 一 个 动作 属性 ， 该 属性 
的 值 在 提交 表单 时 被 触发 。 通 常情 况 下 ， 动 作 是 另 一 个 页 面 的 地 址 ， 或 表单 处 理 程序 的 服 
务 器 脚本 。 

注意 : 本 书 实际 上 只 介绍 如 何 建立 表单 以 供 处 理 ， 而 实际 的 数据 处 理 涉 及 编写 应 用 程 
序 、 数 据 库 及 其 访问 等 。 想 深入 了 解 该 部 分 内 容 的 读者 可 参阅 相关 的 高 级 书籍 。 


8.1.2 在 页 面 中 添加 表单 


在 Dreamweaver 中 ， 可 以 将 整个 页 面 创建 成 一 个 表单 网 页 ， 也 可 以 在 页 面 的 部 分 区 域 
中 添加 表单 ， 方 法 基本 相同 。 将 光标 定位 到 要 创建 表单 的 位 置 ， 单 击 【 插 入 】 面 板 的 【 表 


单 】 类 别 下 的 【表单 】 技 钮 回 ， 即 可 在 页 面 中 插入 一 个 表单 ， 如 图 8-2 所 示 。 


图 8-2 页 面 中 插入 的 表单 


插入 表单 后 ， 页 面 中 会 显示 一 个 红色 虚线 框 ， 用 户 可 通过 属性 检查 器 对 表单 的 一 些 参 
数 进行 设置 ， 如 图 8-3 所 示 。 


1 mm 
到 Ea 动作 | 局 BE 全 x| 闫 名 元 ty 
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图 8-3 表单 的 属性 检查 器 


? 表单 ID: 为 表单 命名 ， 以 便 引用 表单 。 

? 方法 : 设置 将 表单 中 的 数据 传递 给 服务 器 的 方式 ， 包 含 GET 和 POST 两 种 方式 。 
通常 使 用 的 是 POST 方式 ，POST 方式 将 所 有 信息 封装 在 HTTP 请 求 中 ， 是 一 种 可 
以 传送 大 量 数据 的 较 安 全 的 传送 方式 。 而 GET 方式 则 直接 将 数据 追加 到 请 求 该 页 
的 URL 中 ， 不 安全 而 且 传输 的 数据 有 限 。 

? 动作: 指定 处 理 表单 的 动态 页 面 或 脚本 的 路 径 ， 可 以 是 URL 地 址 、HTTP 地 址 ， 
或 Mailto 地 址 。 

? 目标 : 设置 打开 表单 处 理 页 面 的 方式 ， 包 含 blank、_parent、_self、_top 这 4 种 
方式 。 

? 编码 类 型 : 设置 发 送 表 单 到 服务 器 的 媒体 类 型 , 它 只 在 发 送 方法 为 POST 时 才 有 效 ， 
其 默认 值 为 application/x-www-form-urlemoded。 如 果 要 创建 文件 上 传 域 ， 应 选择 


multipart/form-data。 
8.1.3 ”表单 对 象 


表单 对 象 是 实现 表单 具体 功能 的 网 页 元 素 ， 通 过 在 表单 中 添加 不 同 的 表单 对 象 ， 可 以 
允许 用 户 在 表单 中 进行 输入 数据 、 选 择 等 操作 。Dreamweaver 提供 了 一 系列 表单 对 象 ， 在 
【插入 】 面 板 的 【表单 】 类 别 下 可 以 进行 查看 ， 如 图 8-4 所 示 ， 每 个 表单 对 象 都 用 于 不 同 
的 目的 。 


hos_ 
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? 文本 字段 四: 可 以 接受 任何 类 型 文本 内 容 的 输 人 
入 , 可 以 是 单行 或 多 行 , 也 可 以 是 密码 域 (此 时 
文本 字段 中 的 字符 会 被 * 号 或 其 他 指定 符号 谈 
日)。 

? ”隐藏 域 噶 ; 该 表单 元 素 相对 于 访客 不 可 见 ， 它 
主要 用 于 在 网 页 间 传 递 一 些 隐藏 的 信息 ， 方 便 
网 页 对 数据 进行 处 理 。 例 如 在 表单 中 添加 一 个 
隐藏 域 , 用 于 保存 session 对 象 的 值 ， 从 而 得 知 
用 户 的 浏览 状态 : 在 线 或 离线 。 离 线 的 话 就 要 
求 重新 登录 。 

? 文本 区 域 国 : 与 标准 文本 域 相似 , 但 可 用 于 更 
多 文本 的 输入 ， 如 多 行 的 句子 或 段落 。 

? ， 复 选 框 四 用 于 判断 是 或 不 是 ， 复 选 框 可 以 被 
组 合 在 一 起 (但 不 互 斥 )， 共 用 一 个 名 称 ， 也 可 
以 共用 一 个 Name 属性 值 ， 以 实现 多 项 选择 的 
功能 。 

2 单 选 按钮 回 : 代表 相互 排斥 的 选择 ， 选 中 一 8-4 Dreamweaver 提供 的 表单 对 象 
个 单 选 按钮 ， 就 会 取消 组 中 的 所 有 其 他 单 选 
按钮 。 

? ， 单 选 按钮 组 加 :共享 同一 名 称 的 单 选 按钮 的 集合 。 

? 列表 /菜单 图 列表 用 于 在 滚动 列表 中 显示 选项 值 ， 并 允许 用 户 在 列表 中 选择 多 个 
选项 ， 菜 单 用 于 在 弹出 式 菜单 中 显示 选项 值 ， 而 且 只 允许 用 户 选择 一 个 选项 。 

?” 跳 转 菜单 园 ， 用 于 在 表单 中 插入 一 个 导航 条 或 弹出 式 菜单 。 跳 转 菜单 可 以 使 用 户 
为 链接 文档 插入 一 个 菜单 。 

?图像 域 图 : 用 于 在 表单 中 插入 一 幅 图 像 ， 可 以 使 用 图 像 域 来 蔡 换 表单 中 的 提交 按 
钮 ， 以 生成 图 形 化 按钮 。 

? 文件 域 回 ， 用 于 在 文档 中 插入 空白 文本 域 或 【浏览 】 按 钮 ， 通 过 使 用 文件 域 ， 访 
客 可 以 浏览 硬盘 上 的 文件 ， 并 将 这 些 文件 作为 表单 数据 上 传 到 服务 器 。 

? 按钮 加: 用 于 在 表单 中 插入 文本 按钮 。 按 钮 在 单 击 时 执行 任务 ， 如 提交 或 重 置 表 
单 。 用 户 也 可 以 为 按钮 设置 自 定义 名 称 或 标签 。 

?标签 名: 用 于 在 表单 中 插入 注释 标签 ， 由 于 许多 表单 元 素 都 自 带 有 标签 功能 ， 所 
以 不 是 很 常用 。 

? ”字段 集 品 :使 用 字段 集 可 以 在 网 页 中 显示 圆 角 和 矩形 方 框 ， 并 在 方 框 的 左上 角 显 示 
一 个 标题 文字 , 这 样 就 可 以 将 一 些 相关 的 表单 元 素 放 置 在 一 个 字段 集 内 , 以 和 其 他 
元 素 进行 区 分 。 

注意 :细心 的 读者 可 能 发 现 ,和 以 往 Dreamweaver 提供 的 表单 对 象 相 比 , Dreamweaver 

CS4 中 新 增 了 7 个 Spry 表单 对 象 , 它们 位 于 图 8-4 的 最 下 端 , 用 于 验证 用 户 在 对 象 域 中 所 
输入 的 内 容 是 否 为 有 效 的 数据 。 关 于 它们 的 详细 用 法 ， 请 读者 参阅 本 书 第 12 章 内 容 。 
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8.2 添加 表单 对 象 


在 添加 表单 对 象 之 前 ， 为 了 给 表单 一 个 总 体 的 结构 外 观 ， 设 计 者 通常 是 插入 一 个 表格 
来 容纳 各 种 表单 对 象 。 将 光标 定位 在 表单 内 ， 单 击 【 插 入 】 面 板 的 【常用 】 类 别 下 的 【 表 
格 】 按 钮 ， 打 开 【 表 格 】 对 话 框 。 

将 表格 设置 成 9 行 2 列 ,宽度 设置 为 100, 单位 为 百分比 ,边框 设置 为 0, 单元 格 边 距 
和 间距 保留 为 空白 ， 其 他 选项 保留 默认 设置 ， 然 后 单 击 【 确 定 】 按 钮 ， 即 可 在 表单 中 插入 
一 个 表格 ， 如 图 8-5 所 示 。 为 了 以 后 设计 表单 元 素 时 方便 ， 在 属性 检查 器 中 将 表格 名 称 设 
置 为 formTabel。 下 面具 体 来 介绍 各 种 表单 对 象 的 用 法 。 
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图 8-5 在 表单 中 插入 表格 


提示 : 网 页 设计 者 通常 为 表单 元 素 使 用 一 个 两 列 的 表格 , 左 列 包含 表单 标签 , 如 名 称 、 
地 址 等 ， 而 右 列 则 包含 表单 元 素 本 身 ， 如 文本 框 、 复 选 框 等 。 


8.2.1 插入 文本 字段 


文本 字段 是 最 常用 的 表单 对 象 之 一 ， 几 乎 在 所 有 的 表单 中 出 现 ， 用 于 收集 短小 文本 短 
语 中 的 无 结构 数据 。 但 文本 字段 只 能 接受 有 限 的 字符 数 ， 通 常 是 255 个 。 
例 8-1 在 表单 中 使 用 文本 字段 接受 访客 输入 数据 。 

人 @@ 将 光标 定位 到 图 8-5 所 创建 表格 的 右 侧 单元 格 的 第 一 行 中 。 单 击 【插入 】 面板 的 【 表 
单 】 类 别 下 的 【文本 字段 】 按 钮 ， 打开 【 输 入 标签 辅助 功能 属性 】 对 话 框 ， 如 图 8-6 所 示 。 
个 在 [ID] 文本 框 中 输入 “name” ， 在 【标签 文本 】 文 本 框 中 输入 “姓名 ”。 

加 选中 【使 用 “for” 属 性 附加 标签 标记 】 样 式 。 当 使 用 两 列 的 表格 时 ， 表 单元 素 通 
常 使 用 这 种 方式 ， 使 用 “for” 属 性 附加 标签 标记 后 ，Dreamweaver 会 插入 如 下 代码 ， 以 允 
许 <label> 标 签 完 全 从 表单 元 素 <input> 标 签 中 分 离 出 来 ， 显示 两 个 单独 的 表格 单元 格 。 


<label for="name"> 姓 名 </label><input type="text" name="name" id="name"/> 
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@@ 选中 【在 表单 项 前 】 单 选 按钮 ， 将 【访问 键 】 设 置 为 N, 将 【Tab 索引 】 设 置 为 
10， 单 击 【确定 】 按 钮 ， 即 可 在 光标 所 在 位 置 插入 一 个 文本 框 ， 并 带 有 标签 。 
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8-6 在 表单 中 插入 文本 字段 


提示 : 访问 键 是 指 与 在 浏览 器 中 选择 该 表单 对 象 等 效 的 键盘 键 。 例 如 在 本 例 中 ， 按 下 
Alt+N 键 (如 果 使 用 的 是 下 浏览 器 ，Firefox 浏览 器 则 是 Shift+Alt+N 键 )，【 姓 名 】 文 本 框 
将 被 选中 并 且 准 备 输入 数据 。 

人 @ 将 光标 定位 在 文本 “姓名 ”中 ， 在 标签 选择 器 中 单 击 标记 <label>， 将 它 拖 到 同一 
行 的 第 一 个 单元 格 中 。 将 光标 移 到 表格 列 的 分 隔 线 上 ， 当 光标 变形 时 拖 动 改 变 单元 格 列 的 
大 小 ， 如 图 8-7 所 示 。 


加 保存 页 面 。 


思 为 什么 我 在 添加 表单 对 象 时 没有 显示 【输入 标签 辅助 功能 属性 】 对 话 框 ? 
令 Dreamweaver 默认 启用 了 表单 的 辅助 功能 ， 如 果 用 户 在 添加 表单 对 象 时 没有 显示 【输入 标 


签 辅 助 功 能 属性 】 对 话 框 ， 可 选择 【编辑 】| 【首选 参数 】 命 令 , 打开 【首选 参数 】 对 话 框 。 在 
【分 类 】 列 表 中 单 击 【 辅 助 功能 】 选 项 ， 然 后 在 右 侧 选中 【表单 对 象 〗 复 选 框 ,最 后 单 击 【 确 
定 】 按 钮 使 设置 生效 即 可 。 
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8.2.2 ”插入 密码 输入 框 


密码 框 是 网 页 上 的 一 个 常见 部 分 ， 正 常情 况 下 ， 文 本 字段 显示 出 输入 的 字符 。 但 是 ， 
当 文本 字段 被 转换 为 密码 框 后 ， 输 入 的 字符 就 被 遮 罩 了 ， 并 被 描述 为 一 系列 的 星 号 或 粗 体 
圆 点 。 

例 8-2 在 表单 中 使 用 密码 框 。 

入 继续 例 8-1。 在 表格 右 侧 第 2 行 单 元 格 中 插入 文本 字段 ， 如 图 8-8 所 示 设 置 【 输 入 
标签 辅助 功能 属性 】 对 话 框 。 用 同 例 8-1 中 步骤 全 所 示 方法 将 标签 与 文本 框 分 离 。 
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图 8-8 插入 “密码 ”输入 框 


加 现在 来 将 标准 的 文本 框 转换 为 密码 框 .选中 刚 插入 的 文本 框 ,在 属性 检查 器 中 将 【类 
型 】 设 置 为 【密码 】， 通 过 【最 多 字符 数 】 参 数 可 设置 密码 的 最 大 长 度 ， 如 图 8-9 所 示 。 
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图 8-9 将 文本 框 转换 为 密码 框 
加 保存 页 面 。 
8.2.3 插入 文本 输入 区 域 


文本 区 域 允许 输入 比 文 本 字段 更 多 的 文本 字符 。 如 果 输 入 的 文本 超出 了 文本 区 域 的 自 
然 空间 ， 就 会 自动 出 现 滚动 条 ， 以 允许 显示 溢出 的 文本 。 文 本 区 域 通常 用 于 访客 留言 、 个 
人 介绍 等 需要 输入 较 多 字符 的 情况 。 

例 8-3 使 用 文本 区 域 获取 访客 留言 。 

入 继续 例 8-2。 将 光标 定位 在 表格 右 侧 第 8 行 单元 格 中 , 单 击 【插入 】 面 板 的 【表单 】 
类 别 下 的 【文本 字段 】 按 钮 ， 如 图 8-10 所 示 设 置 【输入 标签 辅助 功能 属性 】 对 话 框 。 
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图 8-10 插入 文本 区 域 


加 用 同 例 8-1 中 步骤 加 所 示 方 法 将 标签 与 文本 框 分 离 。 选中 插入 的 文本 区 域 , 在 属性 
检查 器 中 可 以 设置 文本 区 域 的 宽度 (通过 每 行 显示 的 字符 数 来 控制 )、 行 数 ， 以 及 要 显示 在 
文本 区 域 中 的 初始 值 ， 如 图 8-11 所 示 。 
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图 8-11 设置 文本 区 域 


加 保存 页 面 。 
8.2.4 插入 单 选 按钮 


当 需 要 访客 从 大 量 选项 中 互 斥 地 选择 一 个 时 ， 可 以 使 用 单 选 按钮 来 实现 。 和 其 他 表单 
对 象 不 同 ， 每 个 单 选 按钮 并 没有 一 个 独特 的 名 称 ， 而 是 同一 组 中 的 所 有 单 选 按钮 使 用 同一 
个 名 称 ， 通 过 值 的 不 同 来 加 以 区 分 。 

Dreamweaver 提供 了 两 种 方式 来 在 表单 中 创建 单 选 按钮 : 或 是 单个 插入 每 个 单 选 按钮 ， 
或 是 同时 插入 整个 单 选 按钮 组 。 每 种 方法 都 各 有 利弊 : 如 果 单 个 插入 单 选 按钮 ， 将 需要 为 
每 个 按钮 重 命名 ， 以 确保 它们 都 用 同一 名 称 ; 如果 将 它们 作为 一 个 按钮 组 来 添加 ， 它 们 会 
有 同一 个 名 称 ， 但 需要 对 每 个 按钮 添加 辅助 功能 属性 。 本 节 介 绍 后 者 。 

例 8-4 在 表单 中 使 用 单 选 按钮 。 

人 @ 继续 例 8-3。 将 光标 定位 在 表格 右 侧 第 3 行 单元 格 中 , 单 击 【 插 入 】 面 板 的 【表单 】 
类 别 下 的 【 单 选 按钮 组 】 按 钮 ， 打 开 【 单 选 按钮 组 】 对 话 框 。 

四 在 【名称 】 文 本 框 中 输入 “satisfaction”， 该 单 选 按钮 组 用 于 测定 访客 对 本 书 的 满 
意 度 。 选 择 【 标 签 】 栏 中 的 第 一 个 选项 , 输入 “很 满意 ”, 按 Tab 键 ,在 【 值 〗 栏 中 输入 
100。 用 同样 的 方法 将 第 二 个 选项 设置 为 “比较 满意 ”， 值 为 80， 如 图 8-12 所 示 。 

各 单 击 【添加 】 按 钮 图 ，【 标 签 】 栏 将 出 现 新 的 选项 ， 输 入 “一 般 ”， 值 为 60。 用 
同样 的 方法 添加 其 他 两 个 选项 ， 如 图 8-13 所 示 。 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


单 雪 过 得志 有 


ET 
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比 村 两 时 


石 局， 健 用 : 各 招行 各 (<tr> 标 下 ) 布 央 匡 丙 - 南 挤 行 和 (br 六 王 } 
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图 8-12 设置 单 选 按钮 选项 及 其 值 图 8-13 ”添加 并 设置 其 他 单 选 按钮 


人 @ 由 于 同时 添加 了 多 个 单 选 按钮 , 所 以 为 了 避免 单元 格 发 生 嵌 套 , 可 以 使 用 换行 符 来 
分 离 每 个 单 选 按钮 ， 选 中 【换行 符 】 单 选 按钮 ， 单 击 【 确 定 】 按 钮 。 当 插入 了 单 选 按钮 组 
后 ， 可 以 发 现 ， 并 不 像 其 他 的 表单 元 素 一 样 ， 左 侧 并 没有 设 定 标签 。 将 光标 定位 到 左 侧 的 
单元 格 中 ， 输 入 “您 对 本 书 的 满意 度 ”， 如 图 8-14 所 示 。 

加 下 面 来 为 每 个 单 选 按钮 添加 辅助 功能 属性 。 选 择 第 一 个 单 选 按钮 ， 按 CtrlHT 键 打 
开 快速 标签 编辑 器 。 将 光标 定位 在 闭 字 符 “ 人 ”之 前 , 输入 “accesskey="S" tabindex="30"”， 
ed eh la Be hs Sei 


二 
了 问 完 并 不 1 而 基 天; 


(SR : ELUNE 
息 对 众人 的 建 说 。 让 村 儿科 的 建议 ， 


图 8-14 在 表单 中 插入 单 选 按钮 组 图 8-15 ”为 单 选 按钮 添加 辅助 功能 属性 


注意 ; 经 过 设置 后 ， 第 一 个 单 选 按钮 的 快速 访问 键 是 Alt+S。 
人 @ 用 同样 的 方法 为 剩 下 的 4 个 单 选 按钮 输入 以 下 代码 ， 最 后 保存 页 面 。 


accesskey="2” tabindex="40” 
accesskey="3” tabindex="50” 
accesskey="4” tabindex="60” 
accesskey="5” tabindex="70” 


8.2.5 ”插入 复 选 框 


当 需 要 访客 从 一 组 选项 中 选择 多 个 选项 时 ， 可 以 使 用 复 选 框 。 每 个 复 选 框 都 有 它 自己 
的 名 称 和 值 ， 和 单 选 按钮 不 同 ， 用 户 在 表单 中 一 次 只 能 插入 一 个 复 选 框 。 

例 8-5 在 表单 中 使 用 复 选 框 。 

人 @ 继续 例 8-4。 将 光标 定位 在 表格 右 侧 第 4 行 单元 格 中 , 单 击 【插入 】 面 板 的 【表单 】 
类 别 下 的 【 复 选 框 】 按 钮 ， 如 图 8-16 所 示 设 置 【输入 标签 辅助 功能 属性 】〗】 对 话 框 。 
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“第 8 章 使 用 表单 。 


Et 入 入 与 于 湖村 休 要 生 叶 = 一 一 
We | CE 
吉 H 本 书 的 并 谨 ，; 一 向 || mm 和 二 
不 席 粳 i 一 
在 和 下 二 本 | | 
GE 1 EE 
Et a 全 全 区 生 束 星 
2 本 全 相生 上 
你 对 供 们 的 建议 入 FR 了 一 TW 全 自视 一 
和 三 江 和 人 对 十 民 革 六 并 借 际 。 委 可 坟 基 二 
E> YH 


图 8-16 在 表单 中 添加 复 选 杠 


加 将 光标 定位 到 标签 “指定 教材 ”后 ， 按 空格 键 。 重复 步 怠 傅 ， 向 表单 中 添加 另外 3 
个 复 选 框 ,设置 如 下 : 

? ID tutorbook; 标签 文字 教 辅 用 书 ; Tab 索引 值 90。 

? ID selfbook; 标签 文字 个 人 自学 ; Tab 索引 值 100。 

? ID attenstation; 标签 文字 认证 考试 ; Tab 索引 值 110。 

各 将 光标 定位 到 同一 行 第 1 列 的 单元 格 中 , 输入 “您 使 用 本 书 是 作为 : ”, 最 后 的 效 
果 如 图 8- ne 保存 页 面 。 


; :© 比较 
疡 对 本 书 的 其 前 庶 。 :万 
@ 不 


Sa 9 不 光 半 
涉 使 用 本 书 是 作为 :加 失守 要 材 口 教 畏 用 书 巴 个 人 自学 口 认证 寺 调 


: 和 
沪 对 我 们 的 建议 ， 


图 8-17 添加 所 有 复 选 框 后 的 效果 


8.2.6 ”插入 列表 


通过 列表 , 用 户 可 以 在 表单 中 显示 一 个 下 拉 列 表 框 ， 以 供 访客 从 不 同 选项 中 进行 选择 。 
列表 中 的 选项 是 相互 排斥 的 ， 如 单 选 按钮 组 。 也 可 以 启用 多 个 选择 选项 ， 就 好 比 一 组 复 选 
框 。 下 面 的 例子 将 帮助 用 户 设计 一 个 标准 的 下 拉 列 表 框 。 

例 8-6 在 表单 中 使 用 下 拉 列 表 框 。 

@@ 继续 例 8-5。 将 光标 定位 在 表格 右 侧 第 5 行 单元 格 中 , 单 击 【插入 】 面 板 的 【表单 】 
类 别 下 的 【列表 /菜单 】 按 钮 ， 打 开 【 输 入 标签 辅助 功能 属性 】 对 话 框 ， 如 图 8-18 所 示 进 
行 设置 。 用 例 8-1 介绍 的 方法 将 列表 的 标签 文本 拖 动 到 列表 左 侧 的 单元 格 中 。 
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Yvan SN 他 使 用 "or 两 必 附加 村 三村 记 
全 于 和 


位 置 全 去 吉 旬 三 疝 
中 家 要 入 大 所 
Tab 名 大 引 


证 问 各 


各 要 在 主 入 万 妆 时 焉 于 牧 么 此 信息 ， 重 更 二 "一 助 
EE 


8-18 在 表单 中 插入 列表 


加 下 面 来 为 下 拉 列 表 框 添加 以 供 选择 的 选项 。 选 中 插入 的 列表 , 在 属性 检查 器 中 单 击 
【列表 值 】〗 按 钮 ， 打开 【 列 表 值 〗】 对 话 框 。 在 【项 目标 签 】 中 输入 “作者 名 声 ”, 在 【 值 】 
中 输入 “famor”， 如 图 8-19 所 示 。 

各 单 击 【 添 加 】 按 钮 ， 添 加 其 他 的 选项 ， 如 下 所 示 : 

? 项 目标 签 出 版 机 构 ; 值 press。 

? 项 目标 签 封面 设计 ; 值 cover。 

? 项 目标 签 装帧 设计 ; 值 design。 

? 项 目标 签 价格 ; 值 price。 

人 @ 下 面 来 设置 加 载 页 面 时 默认 显示 在 下 拉 列 表 框 中 的 列表 元 素 , 从 【初始 化 选 定 】 下 
拉 列 表 框 中 选中 “作者 声望 ”， 如 图 8-20 所 示 。 

EEE : 


be Bal ORN wei HN am 天 8 
必 EE oe 

es w=] l 
图 8-19 设置 列表 中 的 选项 图 8-20 设置 下 拉 列 表 框 中 默认 显示 的 选项 


人 @ 如 果 选 中 属性 检查 器 中 的 【允许 多 项 】 复 选 框 , 则 允许 访客 在 下 拉 列 表 框 中 同时 选 
择 多 个 选项 。 保 存 并 预览 页 面 ， 如 图 8-21 所 示 。 


“第 8 章 使 用 表单 。 


您 对 本 书 的 满意 度 


您 使 用 本 书 是 作为 ， 回 指定 教材 四 教 铺 用 书 加 个 人 自学 四 认证 考试 
影像 您 购买 本 书 的 最 重要 因素 ， 作者 名 声 ~ 

出 版 结构 

封面 设计 

设计 二 哪 至 方面 进行 改进 ? 


您 对 我 们 的 建议 ， 


图 8-21 预览 下 拉 列 表 框 


8.2.7 ”插入 按钮 


表单 中 的 按钮 担负 着 重要 角色 ， 用 于 提交 或 重 置 表单 ， 并 且 只 有 在 被 鼠标 单 击 时 才 会 
执行 。 下 面 介 绍 如 何在 表单 中 插入 提交 和 重 置 按钮 ， 分 别 用 于 提交 表单 和 将 表单 恢复 到 访 
客 输入 数据 前 的 状态 。 

例 8-7 在 表单 中 插入 提交 和 重 置 按 钮 。 

人 @ 继续 例 8-6。 将 光标 置 于 表格 最 后 一 行 的 右 侧 单元 格 中 。 单 击 【 插 入 】 面 板 的 【 表 
单 】 类 别 下 的 【按钮 】 按 钮 ， 如 图 8-22 所 示 进 行 设置 。 

加 单 击 【 确 定 】 按 钮 ， 可 以 发 现 ，Dreamweaver 像 对 待 其 他 表单 元 素 一 样 ， 将 标签 文 
本 添加 到 了 按钮 的 左边 。 选 中 标签 文本 ， 按 Del 键 将 其 删除 ， 如 图 8-23 所 示 。 
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图 8-22 设置 按钮 的 辅助 功能 属性 图 8-23 ”删除 按钮 的 标签 文本 


介 将 光标 置 于 “提交 ”按钮 后 ,连续 按 Ctrl+Shift+ 空 格 键 , 在 按钮 后 面 插 入 适当 数量 
的 空格 ， 以 便 插 入 “ 重 置 ”按钮 。 

入 单 击 【 插 入】 面板 的 【表单 】 类 别 下 的 【按钮 〗 按 钮 打开 【 输 入 标签 辅助 功能 属 
性 】 对 话 框 。 将 【ID】 设 置 为 reset， 将 【标签 文字 】 设 置 为 “ 重 置 ”， 单 击 【确定 】 按 钮 。 

各 发 现 除了 标签 文本 显示 的 是 “ 重 置 ”外 ,按钮 上 显示 的 文本 仍然 为 “提交 ”。 删 除 
标签 文本 ， 然 后 选中 新 插入 的 按钮 ， 在 属性 检查 器 中 将 动作 设置 为 【 重 设 表单 】， 页 面 中 
的 结果 如 图 8-24 所 示 。 

加 保存 页 面 。 
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图 8-24 ”修改 按钮 的 【动作 】 属 性 
8.2.8 关于 其 他 表单 对 象 


1. 文件 域 

利用 文件 域 ， 访 客 可 以 将 本 地 的 文件 上 传 到 服务 器 上 。 将 光标 定位 到 表单 中 要 添加 文 
件 域 的 位 置 ， 单 击 【 插 入 】 面 板 的 【表单 】 类 别 下 的 【文件 域 】 按 钮 ， 可 打开 【标签 输入 
辅助 功能 属性 】 对 话 框 。 进 行 设置 后 ， 单 击 【 确 定 】 按 钮 即 可 添加 文件 域 。 利 用 属性 检查 
器 ， 用 户 可 对 文件 域 的 名 称 、 字 符 宽度 等 进行 设置 ， 如 图 8-25 所 示 。 

慰 竹 
放生 | 肝 [一 a 
图 8-25 ”使 用 文件 域 上 传 文件 

2. 图 像 域 

使 用 图 像 域 可 以 将 自制 的 图 像 作为 提交 或 重 置 按钮 使 用 。 下 面 的 例子 将 修改 例 8-7 中 
的 表单 按钮 。 

例 8-8 ”使 用 自制 的 按钮 作为 表单 按钮 。 

入 打开 例 8-7 保存 的 页 面 文档 。 删除 表单 中 已 经 插入 的 提交 和 重 置 按 钮 , 将 光标 置 于 
原来 的 “提交 ”按钮 所 在 位 置 。 

加 单 击 【 插 入 】 面 板 的 【表单 】 类 别 下 的 【图 像 域 】 按钮， 在 打开 的 【选择 图 像 源 文 
件 】 对 话 框 中 选择 要 添加 的 按钮 图 像 ， 如 图 8-26 所 示 。 

各 单 击 【确定 】 按钮 , 在 打开 的 【标签 输入 辅助 功能 属性 】 对 话 框 中 进行 相应 的 设置 ， 
单 击 【 确 定 】 按 钮 ， 即 可 完成 图 像 域 的 添加 ， 如 图 8-27 所 示 。 


1 * 的 FH SE 


基本 作 洒 入 巡 弟 叶 二 本 铺 入 支 介意 ， 堪 更 并 型 芒 
Es 


图 8-26 选择 要 作为 图 像 域 的 图 片 图 8-27 设置 【标签 输入 辅助 功能 属性 】 
对 话 框 


人 @@ 在 表单 中 删除 图 像 域 旁边 的 文字 标签 , 然后 在 属性 检查 器 中 输入 图 像 域 的 名 称 , 在 


he 


"第 8 章 使 用 表单 。 


【替换 】 文 本 框 中 输入 当 图 像 域 不 能 正常 显示 时 , 当 光 标 移 到 该 图 像 上 所 显示 的 提示 文本 ， 
如 图 8-28 所 示 。 


图 此 区 赋 ，: 了 短 闵 件 扣 ) 投 立 .jpg 已 对 的 | 和 类 无 jw] 多 
Eanit ee ER 区 


去 


图 8-28 设置 图 像 域 的 属性 


人 @ 用 同样 的 方法 插入 并 设置 要 作为 重 置 表单 按钮 的 图 像 域 ,得 到 的 最 后 效果 如 图 8-29 
所 示 。 保 存 页 面 。 


二 


名 对 我 们 的 建议 ， 
i 二 pt | 
8-29 ”使 用 图 像 域 作为 表单 按钮 
3. 跳 转 菜单 


使 用 跳 转 菜单 可 以 创建 到 Web 站 点 内 文档 的 链接 、 其 他 Web 站 点 上 文档 的 链接 ， 以 
及 电子 邮件 链接 、 图 形 链接 等 。 选 择 跳 转 菜单 中 的 任意 一 项 ， 就 可 跳 转 到 相应 的 页 面 。 跳 
转 菜单 可 以 位 于 表单 中 ， 也 可 以 位 于 页 面 中 的 其 他 位 置 。 

将 光标 定位 到 要 添加 跳 转 菜单 的 位 置 ， 单 击 【 插 入 】 面 板 的 【表单 】 类 别 下 的 【 跳 转 
菜单 】 按 钮 ， 打 开 【 插 入 跳 转 菜单 】 对 话 框 。 在 【文本 】 文 本 框 中 输入 要 显示 在 菜单 中 的 
菜单 项 的 名 称 ， 如 “搜狐 ”， 在 【选择 时 ， 转 到 URL】 文本 框 中 输入 选择 该 菜单 项 后 要 跳 
转 到 的 页 面 ， 如 http:/www.sohu.com。 单 击 【 添 加 】 按 钮 加， 可 增加 一 个 菜单 项 ， 用 同样 
的 方法 完成 菜单 项 的 设置 ， 如 图 8-30 左 图 所 示 。 

选中 【更 改 URL 后 选择 第 一 个 项 目 】 复 选 框 ， 表 示 选 择 跳 转 菜单 中 的 菜单 项 后 ， 执 行 
跳 转 ， 同 时 将 跳 转 菜单 中 的 显示 恢复 为 选中 第 一 个 菜单 项 的 状态 。 选 中 【菜单 之 后 插入 前 
往 按钮 】 复 选 框 ， 将 在 跳 转 菜单 后 添加 【前 往 】 按 钮 。 当 用 户 添加 【前 往 】 按 钮 后 ， 即 可 
按 菜 单项 的 设置 进行 跳 转 。 设 置 完成 后 ， 单 击 【 确 定 】 按 钮 ， 页 面 中 插入 的 跳 转 菜 单 如 图 
8-30 右 图 所 示 。 


EE 吾 提 二 后 手 入 机 注 正 全 
更 澡 URL 后 千 渍 落 一 个 矶 本 


图 8-30 插入 跳 转 菜单 
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8.3 设计 表单 


通过 8.2 节 的 学 习 ， 用 户 已 经 可 以 制作 一 个 较为 完整 的 表单 了 。 但 这 样 的 表单 却 是 完 
全 没有 样式 的 。 下 面 介绍 如 何 通过 使 用 字段 集 和 CSS 规则 使 表单 具备 更 好 的 可 读 性 和 可 理 
解 性 。 
8.3.1 使 用 字段 集 整合 表单 对 象 


使 用 字段 集 可 以 在 表单 中 显示 圆 角 和 矩形 方 框 ， 并 在 方 框 的 左上 角 显 示 一 个 标题 文件 。 
这 样 就 可 以 将 一 些 相关 的 表单 对 象 放置 在 一 个 字段 集 内 ， 以 和 其 他 表单 对 象 相 区 别 ， 从 而 
使 表单 的 结构 更 加 合理 。 

例 8-9 练习 使 用 字段 集 整合 表单 对 象 。 

和 @ 打开 例 8-7 保存 的 页 面 。 将 光标 定位 在 包含 表单 元 素 的 表格 的 任意 一 个 位 置 ,在 标 
签 选择 器 中 选中 标签 <table#formTable>。 

加 在 【插入 】 面 板 的 【表单 】 类 别 下 单 击 【字段 集 】 按 钮 ， 当 出 现 【字段 集 】 对 话 杠 
后 ， 在 【标签 】 文 本 框 中 输入 “读者 反馈 卡 ”， 单 击 【确定 】 按 钮 。Dreamweaver 会 在 表 


8-31 为 整个 表格 使 用 字段 集 


各 保存 页 面 。 
8.3.2 ”使 用 CSS 规则 美化 表单 


虽然 表单 中 的 表单 对 象 有 不 同 的 类 型 ， 但 由 于 它们 的 一 些 共同 特性 ， 使 得 用 户 可 以 通 
过 定义 CSS 规则 来 对 它们 进行 统一 和 美化 。 

例 8-10 使 用 CSS 规则 来 美化 表单 样式 。 

入 继续 例 8-9。 首 先 来 定义 CSS 样式 。 打 开 【CSS 样式 】 面 板 。 单 击 【新 建 CSS 规 
则 】 按 钮 ,新 建 .legend 样式 规则 , 并 选择 将 其 定义 到 一 个 新 的 CSS 样式 文件 中 ,如 图 8-32 
所 示 。 

四 单 击 【 确 定 】 按 钮 ， 在 打开 的 对 话 框 中 指定 新 CSS 样式 文件 的 名 称 为 form.css，, 并 
设置 其 保存 路 径 。 此 后 所 定义 的 CSS 规则 将 都 保存 在 该 文件 中 。 

各 在 打开 的 【Css 规则 定义 】 对 话 框 中 定义 <legend> 标 签 ， 即 字段 集 文字 的 样式 ， 如 
图 8-33 所 示 。 

从 用 同样 的 方法 定义 表格 样式 的 CSS 规则， 代码 如 下 ， 它 们 分 别 用 于 定义 表格 、 表 


ha 


格 的 单元 格 的 样式 。 


这 乔 吉 尖 到 - 
洲 555 未 肝 二 洗 寺 本 六 法皇 袜 的 乱 。 
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8-32 ”将 样式 规则 定义 在 form.css 样式 文件 中 


#formTable{ 
font-size: 14px; 
border: 2px solid #000066; 
line-height: 20px; 
width: 700px; 
fFEoat: lerftr 

} 

#formTable caption { 
font-size: 16px; 
line-height: 22px; 
font-weight: bold; 
color: #FFFFFF; 
text-align: left; 
background-color: #000066; 
text-indent: 10px; 

} 

#formTable thead { 
font-size: 14px; 
line-height: 22px; 
font-weight: bold; 
color: #000066; 
text-align: left; 
background-color: #CCCCCC; 
text-indent: 10px; 
border-bottom-width: lpx; 
border-bottom-style: solid; 
border-bottom-color: #999999; 

} 

#formTable td { 
background-color: #FFFFFF; 
text-indent: 10px; 

} 
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图 8-33 ”定义 .legend 样式 规则 


加 定义 .formLabel 样式 ， 它 用 于 设置 表单 对 象 的 标签 文本 样式 。 


.formLabel 1{ 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


font-weight: bold; 
text-align: righty 
时 


人 @@ 定义 ,inputField 样式 ， 它 用 于 设置 表单 中 文本 字段 的 样式 。 


-inputField { 
color: #000000; 
background-color: #CCCCCC; 
i 


六 下 面 来 应 用 样式 。 将 光标 置 于 表单 中 , 在 标签 选择 器 中 单 击 <tablef#formTabel>, 在 
属性 检查 器 中 将 【边框 】 设 置 为 1 像素 。 切 换 到 【代码 】 视 图 中 定义 formTabel 的 代码 部 
分 ,添加 ID 属性 ,如 图 8-34 所 示 。 这 样 前 面 定义 的 #formTable、#formTable thead 和 #formTable 
td 便 自动 应 用 到 表格 formTable 上 。 


Eco 


8-34 ”为 表格 添加 ID 属性 以 应 用 样式 


人 @ 将 光标 定位 到 表格 的 第 一 个 单元 格 中 , 然后 向 下 拖 动 , 直到 带 有 “您 对 我 们 的 建议 ” 
标签 ， 然 后 在 属性 检查 器 的 【样式 】 下 拉 列 表 框 中 选择 formLabel， 此 时 所 有 的 标签 都 用 
粗 体 显示 ， 并 对 齐 到 了 各 自 表 格 单元 格 的 右边 ， 如 图 8-35 所 示 。 

@ 选择 “姓名 ” 右 侧 的 文本 输入 框 ,在 属性 检查 器 的 【类 】 下 拉 列 表 框 中 选择 inputField， 
同样 的 方法 为 “密码 ”、“ 您 对 我 们 的 建议 ” 右 侧 文本 框 应 用 inputField 样式 ， 效果 如 
图 8-36 所 示 。 


加 个 人 自学 四 从 证 当 斌 


豆 人 | 
fT 十 你 对 我 们 的 时 议 + 前 


图 8-35 ”为 表单 对 象 的 标签 文本 应 用 样式 图 8-36 为 文本 输入 框 应 用 样式 


四 将 光标 定位 到 “读者 反馈 卡 "处 ,在 属性 检查 器 的 【样式 】 下 拉 列 表 框 中 选择 legend， 
按 F12 键 预览 页 面 ，Dreamweaver 会 提示 是 否 保存 修改 ， 单 击 【 是 】 按 钮 ， 效 果 如 图 8-37 
所 示 。 


hzo 


.第 8 章 使 用 表单 。 


读者 反馈 卡 
权 名 : 
守 码 : 
很 浓 意 
9 比较 清 意 
您 对 本 书 的 满意 度 : ” 日 一 般 
9 不 浓 意 
| Oo 
您 使 用 本 书 是 作为 : | 目 指定 教 村 目 教 铺 用 蔬 回 个 人 自学 回 认证 考试 


| ”影像 您 购买 本 书 的 最 重要 因素 :作者 声 ~ 


了 E 病 本 要 人 在 宙 本 方面 玉生 下 到 了 
您 对 我 们 的 建议 : 
vv 是: 本 时 


图 8-37 表单 最 终 效果 


本 章 小 结 


表单 是 网 站 与 访客 进行 信息 交流 和 互动 的 主要 方式 ，Dreamweaver 提供 了 一 个 强大 的 
表单 解决 方案 ， 来 保证 数据 的 输入 和 输出 一 样 简便 。 本 章 介 绍 了 表单 的 交互 过 程 和 设计 方 
法 ， 重 点 介绍 表单 对 象 的 添加 方法 。 通 过 本 章 的 学 习 ， 读 者 应 掌握 表单 的 制作 方法 ， 并 学 
会 使 用 CSS 设计 其 样式 。 关于 表单 与 后 台数 据 库 的 交互 ， 请 读者 参阅 相关 高 级 书籍 。 下 一 
章 向 读者 介绍 如 何 组 建 Dreamweaver 站 点 。 


习 题 


填空 题 
. Internet 上 存在 着 大 量 的 表单 ， 它 是 网 页 与 访客 的 一 种 交互 界面 ， 主 要 用 于 ， 也 可 以 用 于 实 
现 搜索 。 
2. 表单 在 HTML 代码 中 使 用 标签 来 标记 。 
3. 将 表单 中 的 数据 传递 给 服务 器 的 方式 包含 GET 和 POST 两 种 ， 通 常 使 用 的 是 。 
4. 在 添加 表单 对 象 之 前 ， 为 了 给 表单 一 个 总 体 的 结构 外 观 ， 设 计 者 通常 是 插入 一 个 来 容纳 各 
种 表单 对 象 。 
5. 利用 ， 访 客 可 以 将 本 地 的 文件 上 传 到 服务 器 上 。 
6. 使 用 可 以 在 表单 中 显示 圆 角 和 矩形 方 框 ， 并 在 方 框 的 左上 角 显 示 一 个 标题 文件 。 
选择 题 
7. 当 需 要 访客 从 大 量 选 项 中 互 斥 地 选择 一 个 时 ， 可 以 使 用 ( ”) 来 实现 。 
A. 文本 框 B. 密码 框 C. 单 选 按钮 D. 复 选 框 
8. 关于 表单 ， 下 列 说 法 正确 的 是 (。 )。 
A. 在 Dreamweaver 中 ， 可 以 在 网 页 的 局 部 使 用 表单 ， 但 不 能 将 整个 页 面 作为 表单 。 
B. 表单 只 能 通过 内 置 的 按钮 来 进行 提交 或 重 置 。 
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C. 表单 的 具体 功能 是 通过 表单 对 象 来 实现 的 。 
D. 跳 转 菜单 只 能 位 于 表单 中 。 
简 答题 
9. 在 Dreamweaver 中 ， 如 何 对 表单 启用 辅助 功能 属性 ? 
10. 标准 文本 字段 与 文本 区 域 之 间 的 区 别 是 什么 ? 
11. 单 选 按钮 与 复 选 框 的 主要 区 别 是 什么 ? 
上 机 操作 题 
12. 创建 图 8-38 所 示 的 表单 。 


带 "号 的 项 目 为 必 选 项 ,请 全 部 填写 
用 户 登 录 昵 称 * 
5-20 位 字母 、 数 字 或 字符 组 合 ， 首 字母 必须 为 字 
母 。 
为 了 您 的 帐户 安全 ， 强 烈 建议 你 的 密码 使 用 字符 + 数字 + 特殊 字符 方式 ， 并 且 密 码 长 
度 大 于 8 位 。 


重 夏 输入 密码 * 
注意 : 邮箱 必须 是 可 以 收 到 CSDN 数 活 码 的 。 
用 户 注册 后 ， 需 要 激活 ， 才 可 以 使 用 ! 激活 码 只 会 发 到 你 注册 邮箱 中 * 
Email 址 ” 
以 下 两 个 选项 ， 只 要 有 任何 一 个 没有 输入 ， 你 将 不 能 使 用 通过 回答 问题 新 设 密码 的 功能 。 
用 来 帮 您 找 回 忘记 的 密码 ! 
密码 提示 问题 
用 来 帮 您 找 回 忘记 的 密码 ! 
提示 问题 答案 
输入 校 验 码 * 


注册 条 款 : 区 ”我 已 仔细 阅读 并 接受 CSDNH 注 册 条 款 。 CSDN 福 册 条 蒜 


图 8-38 ”要 设计 的 表单 效果 


第 9 章 


组 建 Dreamweaver 本 地 站 点 


本 章 介绍 网 站 的 相关 知识 ， 以 及 如 何在 Dreamweaver 中 组 建 Web 站 点 。 通 过 本 章 的 学 
习 ， 应 该 完成 以 下 学 习 目 标 : 

{YY 了解 网 站 的 空间 和 域名 

YY 了解 网 站 的 设计 流程 

fy 了解 Dreamweaver 中 的 站 点 类 型 

YY 学 会 规则 和 设计 站 点 的 结构 

ty 学 会 创建 和 管理 Dreamweaver 本 地 站 点 


9.1 建站 前 的 准备 知识 


一 个 或 多 个 网 页 通过 链接 联系 起 来 就 构成 了 站 点 。 在 创建 站 点 之 前 ,用户 需 要 了 解 一 下 
网 站 的 基础 知识 ， 包 括 网 站 的 空间 、 域 名 、 设 计 流 程 ， 以 及 Dreamweaver 中 的 站 点 类 型 等 。 


9.1.1 网 站 的 空间 和 域名 


网 站 要 在 Internet 上 存在 ， 必 须 有 一 个 存储 网 站 内 容 的 空间 。 同 时 ， 还 要 有 一 个 用 于 
访问 该 网 站 的 域名 。 

对 于 空间 ， 现 在 免费 的 越 来 越 少 了 ， 大 部 分 的 空间 都 是 收费 的 ， 并 且 价 格 也 是 千 差 万 
别 。 用 户 可 以 根据 需要 选择 适合 自己 的 空间 服务 商 。 根 据 不 同 的 要 求 ， 空 间 分 为 静态 网 页 
空间 和 动态 网 页 空间 两 种 。 前 者 可 以 存储 普通 的 HTML 网 页 ， 后 者 则 可 以 存储 采用 ASP、 
JSP 等 服务 器 技术 的 网 页 。 

通常 情况 下 ， 空 间 服 务 商 都 提供 FTP 网 页 上 传 服 务 。FTP 是 File Transfer Protocol( 文 
件 传 输 协议 ) 的 缩写 ， 顾名思义 ， 就 是 专门 用 来 传输 文件 的 协议 。 也 就 是 说 ， 通 过 FTP 可 
以 在 Internet 上 的 任意 两 台 计算 机 间 互 传 文件 。 对 于 FTP， 服务 商会 提供 一 个 FTP 的 地 址 、 
用 户 名 以 及 密码 。 通 过 这 些 信 息 ， 用 户 就 可 以 登录 到 自己 的 空间 ， 进 行 各 种 文件 操作 。 

要 登录 到 自己 的 空间 ， 用 户 可 以 使 用 CuteFTP、FTPXP 等 FTP 软件 ， 也 可 以 使 用 
Dreamweaver 的 站 点 管理 功能 。 

域名 类 似 于 Internet 上 的 门牌 号 码 , 是 用 于 识别 和 定位 Internet 上 计算 机 的 层次 结构 式 
字符 标识 ， 与 该 计算 机 的 他 地 址 相对 应 。 但 相对 于 IP 地 址 ， 域 名 更 便于 理解 和 记忆 。 按 
照 所 处 级 别 的 不 同 ， 域 名 可 分 为 顶级 域名 (com)、 二 级 域名 (sohu.com)、 三 级 域名 
(news..sohu.com) 和 四 级 域名 等 。 顶 级 域名 又 可 分 为 国际 域名 和 国内 域名 两 类 。 
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国际 域名 也 称 为 机 构 性 域名 ， 其 顶级 域 表 示 主 机 所 在 机 构 或 组 织 的 类 型 ， 只 有 国际 性 
的 企业 或 机 构 才 使 用 国际 域名 。 国 际 域名 目前 有 8 个 : 

商业 性 公司 “.com” 

网 络 技 术 公 司 “.net” 

非 营 利 机 构 “.org” 

美国 教育 机 构 “.edu” 

美国 军事 组 织 “.mil” 

美国 政府 机 关 “.gov” 

政府 间 根 据 国 际 条 约 成 立 的 组 织 “ .int” 

美国 军 方 保留 域 “.arpa” 

除了 “.int” 和 “.arpa” 外 ， 其 他 国际 域名 都 归 国 际 域名 地 址 管理 机 构 统一 管理 。 目 前 
全 球 共 有 121 家 国际 域名 注册 商 ， 有 62 家 可 以 运行 ， 亚 洲 有 9 家 。 

国内 域名 也 称 为 地 理性 域名 ， 其 顶级 域 表 示 主 机 所 在 地 区 的 国家 代码 。 如 “.cn” 表 示 
中 国 ，“.uk” 表 示 英 国 ，“.it” 表 示意 大 利 等 。 在 中 国 注 册 的 域名 顶级 域 为 en， 我 国 的 二 
级 域名 又 分 为 类 别 域名 和 行政 域名 两 类 。 类 别 域名 有 6 个 ， 分 别 是 : ac( 科 研 机 构 )、com( 企 
业 )、gov( 政 府 机 构 )、net( 信 息 中心 )、org( 非 营利 性 组 织 ) 和 edu( 教 育 机 构 )。 行 政 域名 有 34 
个 ， 分 别 对 应 于 我 国 各 省 、 自 治 区 、 直 辖 市 。 顶 级 域 cn 下 的 域名 由 中 国 互 联网 络 信息 中 心 
管理 。 

网 站 可 以 注册 两 种 类 型 的 域名 ， 一 种 是 使 用 国际 通用 顶级 域名 ， 如 www.slsdi.com， 由 
国际 域名 管理 机 构 负 责 受 理 ， 另 一 种 是 使 用 中 国 通用 域名 ， 如 www.slsdi.com.cn， 由 中 国 
互联 网 络 信息 中 心 管理 。 

注意 : 域名 注册 遵循 的 是 “ 先 申请 先 注 册 ” 的 原则 ， 没 有 预 留 服务 ， 因 而 ， 一 旦 确定 
好 合适 的 域名 后 ， 就 应 马上 注册 。 


9.1.2 ”网 站 的 设计 流程 


使 用 Dreamweaver CS4 制作 网 站 时 ,可 以 将 整个 网 站 的 设计 与 开发 过 程 分 为 站 点 分 析 、 
内 容 实现 、 宣 传 发 布 、 管 理 与 维护 这 4 个 阶段 。 
1. 站 点 分 析 阶 段 
在 站 点 分 析 阶 段 ， 网 站 制作 者 应 根据 网 站 的 功能 需求 确定 网 站 的 主题 、 规 划 站 点 地 图 
(Site Map) 和 设计 内 容 结构 页 面 ， 并 以 此 为 依据 收集 与 整理 相关 的 资料 素材 。 
? 确定 网 站 的 主题 : 确定 网 站 的 主题 是 网 站 命名 与 题材 选择 的 基础 。 这 项 工作 需要 进 
行 大 量 的 市 场 调研 和 咨询 , 并 通过 论证 分 析 确 认 最 终 选 题 的 可 行 性 。 这 一 步 是 整个 
网 站 需求 分 析 阶 段 中 最 重要 的 一 环 , 因为 网 站 主题 生命 力 是 否 强壮 , 将 最 终 影响 网 
站 的 受 欢迎 程度 。 
? 规划 站 点 地 图 : 所 谓 规 划 站 点 地 图 就 是 设计 网 站 的 链接 结构 。 比 较 好 的 网 站 链接 结 
构 应 该 与 树 型 网 站 目录 结构 相 结 合 ， 并 满足 以 下 条 件 : 
? ”网 站 首页 中 的 链接 指向 站 点 内 所 有 的 栏目 频道 的 主页 。 
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? ”网 站 首页 一 般 不 直接 链接 站 点 内 具体 的 内 容 页 ， 除 非 是 为 了 突出 显示 主题 非 

常 想 推 出 的 几 个 特殊 页 面 。 

在 网 站 中 所 有 栏目 频道 的 主页 都 能 链接 到 其 他 的 栏目 频道 主页 。 

网 站 中 所 有 的 栏目 频道 主页 都 有 能 返回 网 站 首页 的 链接 。 

网 站 中 所 有 的 栏目 频道 主页 都 拥有 打开 属于 自己 本 身 频 道内 容 页 的 链接 。 

网 站 栏目 频道 主页 一 般 链接 向 属于 其 他 栏目 频道 的 内 容 页 。 

网 站 中 所 有 的 内 容 页 都 有 返回 网 站 首页 的 链接 。 

网 站 所 有 的 内 容 页 都 有 打开 自己 的 上 一 级 栏目 频道 主页 的 链接 。 

网 站 的 内 容 页 可 以 拥有 访问 与 自己 处 于 同一 个 栏目 频道 下 的 其 他 内 容 页 的 

链接 。 

? ”网 站 的 内 容 页 在 某 些 情况 下 , 可 以 适当 地 以 关键 词 的 形式 链接 向 其 他 栏目 频 
道 的 内 容 页 。 

设计 内 容 结 构 页 面 : 内 容 结构 页 面 能 够 反映 网 站 需求 的 结构 图 , 它 是 实施 网 站 内 容 

实现 阶段 时 制作 具体 站 点 内 容 页 面 的 重要 参考 。 

资料 收集 与 整理 : 在 确定 了 网 站 的 主题 和 结构 后 ， 下 面 就 可 以 开始 着 手 收集 各 种 相 

关 的 资料 。 在 收集 网 站 建设 资料 素材 的 过 程 中 , 用 户 可 以 依据 网 站 的 内 容 结构 对 所 

有 收集 到 的 资料 进行 分 类 整理 。 


2. 内 容 实现 阶段 
在 网 站 的 主题 、 结 构 被 确定 后 ， 就 可 以 开始 正式 实施 网 站 的 建设 了 。 根 据 站 点 分 析 阶 
段 完成 的 各 项 准备 素材 制作 一 个 网 站 ， 一 般 包括 以 下 4 个 步骤 。 
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创建 与 规划 站 点 : 就 是 建立 本 地 站 点 开发 环境 , 并 根据 站 点 分 析 阶 段 确定 的 网 站 链 
接 结 构 ， 规 划 网 站 目录 结构 。 

创建 与 设计 网 页 框架 : 就 是 在 网 站 的 目录 中 分 别 创建 属于 各 目录 的 网 站 栏目 页 面 ， 
并 设计 具体 网 页 页 面 的 布局 与 色彩 搭配 ， 设 置 页 面 的 属性 。 

填充 和 设置 网 页 内 容 : 包括 在 页 面 中 插入 文本 、 音 乐 、 图 像 、 动 画 等 页 面 元 素 ， 以 
及 设置 这 些 页 面 元 素 的 页 面 效果 。 网 站 的 内 容 是 网 站 成 功 的 关键 , 如 果 网 站 没有 吸 
引 人 的 内 容 , 那么 将 影响 到 网 站 的 浏览 量 , 因此 这 一 步 是 整个 内 容 实现 阶段 中 最 关 
键 的 一 步 。 

设置 页 面 动 态 效 果 : 在 Dreamweaver CS4 开发 环境 中 设置 页 面 动态 效果 包括 创建 
网 站 的 数据 库 连接 、 创 建 数 据 源 、 插 入 动态 页 面 元 素 、 设 置 服务 器 行为 等 具体 的 操 
作 。 这 一 步 主要 是 制作 网 站 中 例如 用 户 注册 系 统 、 用 户 登 录 系 统 或 留言 簿 系统 的 具 
体 页 面 。 


3. 宣传 发 布 阶段 

整个 站 点 编辑 完成 后 ， 需 要 在 服务 器 上 测试 发 布 。 在 这 一 阶段 中 用 户 可 以 根据 客户 端 
要 求 ， 或 具体 浏览 器 的 需求 等 对 站 点 进行 最 终 的 测试 和 编辑 。 在 完成 网 站 的 发 布 工 作 后 ， 
可 以 利用 加 入 搜索 引擎 或 预定 板块 等 方式 ， 在 网 络 中 对 网 站 进行 宣传 ， 吸 引 更 多 的 网 络 用 
户 访 问 网 站 。 
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4. 管理 和 维护 阶段 

网 站 发 布 以 后 ， 只 有 经 常 性 地 对 网 站 内 容 进行 维护 和 更 新 ， 在 原 有 内 容 基础 上 不 断 添 
加 新 的 内 容 ， 如 开辟 新 的 栏目 、 增 加 新 的 服务 ， 或 者 增加 更 多 的 互动 效果 等 ， 才 能 使 网 站 
更 加 合乎 潮流 ， 跟 上 时 代 发 展 的 步伐 。 另外， 当前 的 网 页 设计 技术 发 展 很 快 ， 只 有 不 断 采 
用 新 技术 更 新 和 升级 网 站 ， 才 能 使 网 站 拥有 更 好 的 用 户 体验 ， 满 足 浏 览 者 不 同 的 需求 。 因 
而 ， 网 站 的 建设 是 一 个 长 期 的 过 程 ， 而 不 可 能 一 劳 永 逸 。 


9.1.3 了 解 Dreamweaver 站 点 


Dreamweaver 站 点 由 本 地 文件 夹 、 远 程 文件 夹 和 测试 服务 器 文件 夹 3 部 分 组 成 (如 图 
9-1 所 示 )， 其 具体 结构 取决 于 开发 环境 和 所 开发 的 Web 站 点 类 型 。 


Internet 


图 9-1 本 地 文件 夹 、 远 程 文件 夹 和 测试 服务 器 文件 夹 


? 本 地 文件 夹 : 本 地 文件 夹 是 网 站 制作 者 的 工作 目录 ，Dreamweaver 将 该 文件 夹 称 为 
“本 地 站 点 ”。 该 文件 夹 可 以 位 于 本 地 计算 机 上 ,， 也 可 以 位 于 网 站 服务 器 上 。 它 是 
Dreamweaver 站 点 所 处 理 的 文件 的 存储 位 置 。 用 户 只 需 建立 本 地 文件 夹 即 可 定义 一 
个 Dreamweaver 站 点 。 但 若 要 向 网 站 服务 器 传输 文件 或 开发 网 页 应 用 程序 ， 则 还 
需要 添加 设置 远程 站 点 (文件 夹 ) 和 测试 服务 器 信息 。 

? 远程 文件 夹 : 远程 文件 夹 位 于 运行 网 站 服务 器 的 计算 机 上 ， 又 称 “远程 站 点 ”。 该 
文件 夹 负责 存储 用 于 网 站 测试 、 生 产 和 协作 的 网 站 文件 。Dreamweaver 站 点 的 远程 
文件 夹 和 本 地 文件 夹 使 站 点 开发 者 能 够 在 网 站 服务 器 和 本 地 计算 机 之 间 传 输 和 管 

理 站 点 中 的 文件 。 

? 测试 服务 器 文件 夹 : 测试 服务 器 文件 夹 是 Dreamweaver 处 理 动态 页 面 的 文件 夹 ， 
又 称 为 “测试 站 点 ”。 在 Dreamweaver 中 使 用 ASP 或 PHP 等 服务 器 技术 开发 动态 
网 页 时 ， 需 要 测试 服务 器 的 服务 以 便 在 工作 时 生成 和 显示 动态 内 容 。 测 试 服务 器 可 
以 是 本 地 计算 机 、 网 站 服务 器 、 中 间 服 务 器 或 生产 服务 器 。 只 要 该 测试 服务 器 可 以 
处 理 用 户 计划 开发 的 动态 页 类 型 ， 选 择 哪个 就 无 关 紧 要 。 
注意 : 远程 文件 夹 结构 与 本 地 文件 夹 结构 必须 完全 匹配 ， 否 则 ，Dreamweaver 会 将 文 
件 上 传 到 错误 的 位 置 , 站 点 的 访问 者 将 无 法 看 到 这 些 文件 , 图 像 和 链接 路 径 也 可 能 被 破坏 。 


hzs_ 
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9.2 创建 Dreamweaver 站 点 


创建 网 站 的 第 一 步 是 规划 站 点 的 结构 , 然后 在 本 地 计算 机 上 搭建 站 点 , 设计 网 页 内 容 ， 
成 功 后 再 上 传 到 服务 器 上 。 


9.2.1 


规划 网 站 的 结构 


网 站 的 结构 包括 目录 结构 和 链接 结构 ， 这 两 种 结构 之 间 既 有 区 别 又 有 联系 。 其 中 ， 链 
接 结构 建立 在 目录 结构 之 上 ， 并 反映 网 站 的 目录 结构 。 

目录 结构 是 指 网 站 的 各 种 文件 在 服务 器 上 存储 的 方式 , 对 于 访客 而 言 , 它 是 不 可 见 的 。 
初学 者 在 建立 站 点 时 往往 文件 存放 得 一 团 烛 然 网 站 建立 后 也 能 正常 运行 ， 但 在 扩展 和 
维护 时 非常 困难 。 在 规划 网 站 的 目录 结构 时 应 遵循 以 下 原则 : 


? 


不 要 用 一 个 目录 存放 整个 站 点 的 文档 ， 而 应 使 用 子 目 录 分 类 保存 网 站 栏目 内 容 文 
档 。 将 所 有 网 站 文件 都 放 在 根 目录 下 , 容易 造成 网 站 文件 管理 混乱 和 上 传 更 新 站 点 
文件 时 速度 缓慢 等 问题 。 因此 ， 在 规划 网 站 目录 结构 时 ,应 尽量 减少 网 站 根 目录 中 
的 文件 存放 数量 。 要 根据 网 站 的 栏目 在 网 站 根 目录 中 创建 相关 的 子 目 录 , 例如 企业 
站 点 可 以 按 网 站 首页 中 的 公司 简介 、 产 品 介 绍 、 价 格 查 询 、 在 线 订 单 ， 反 馈 联系 等 
栏目 建立 相应 站 点 目录 。 

在 站 点 的 每 个 栏目 目录 下 都 建立 Image、Music 和 Flash 目录 ， 以 存放 图 像 、 音乐 、 
视频 和 Flash 文件 。 这 样 可 以 方便 用 户 在 管理 网 站 文件 时 ， 正 确 区 分 具体 网 站 素材 
文档 的 确切 位 置 。 

避免 目录 层次 太 深 。 网 站 目录 的 层次 最 好 不 要 超过 3 层 , 因为 太 深 的 目录 层次 不 利 
于 维护 与 管理 。 

不 要 使 用 中 文 作 为 目录 名 。 使 用 中 文 作为 站 点 目录 名 称 可 能 会 影响 网 站 网 址 的 正确 
显示 。 因 此 ， 在 规划 网 站 目录 结构 时 用 户 应 尽量 避免 使 用 中 文 作 为 站 点 目录 名 。 
避免 使 用 太 长 的 站 点 目录 名 。 长 目录 名 不 容易 被 记 住 , 用 户 在 规划 时 应 尽量 使 用 简 
短 有 效 的 单词 作为 目录 名 称 ， 以 方便 日 后 查找 与 管理 。 

使 用 意义 明确 的 字母 作为 站 点 目录 名 称 。 例 如 使 用 HTML、Database、Image 或 ASP 
等 意义 明确 的 字母 作为 站 点 目录 的 名 称 ， 既 容易 识别 又 容易 记忆 , 能 够 方便 用 户 的 
管理 操作 。 


链接 结构 是 网 站 在 运行 时 所 抽象 出 来 的 基于 目录 结构 的 拓扑 结构 ， 访 客 可 通过 站 点 提 
供 的 站 点 地 图 来 获取 。 通 常 ， 网 站 的 链接 结构 包括 树 状 链接 结构 和 星 型 链接 结构 ， 在 规划 
站 点 链接 时 应 混合 应 用 这 两 种 链接 结构 设计 站 点 内 各 页 面 的 链接 ， 尽 量 使 网 站 的 浏览 者 既 
可 以 方便 快捷 地 打开 自己 需要 访问 的 网 页 ， 又 能 清晰 地 知道 当前 页 面 处 于 网 站 内 的 确切 位 
置 ， 例 如 在 网 站 的 首页 和 站 点 内 的 一 级 页 面 之 间 使 用 星 型 链接 结构 ， 一 级 和 二 级 页 面 之 间 
使 用 树 状 链接 结构 ， 如 图 9-2 所 示 。 

在 图 9-2 所 示 的 网 站 中 的 首页 、 家 庭 影院 、 诗 意 长 序 、 情 感 测试 、 经 典 搞笑 、 动 画 欣 
赏 等 页 面 之 间 采 用 星 型 链接 结构 ， 互 相 之 间 可 以 通过 链接 直接 到 达 。 而 家 庭 影 院 和 诗意 长 
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廊 页 面 和 它们 的 子 页 面 之 间 则 采用 树 状 链接 结构 ， 用户 在 访问 了 Poeml 后 , 需要 返回 家 庭 
影院 页 面 才能 访问 Poem2 页 面 或 Poem3 页 面 。 


全 NN 
网 站 首页 
| 首页 
| | | | 
®@ OO 
一 级 页 面 
家 庭 影 院 诗意 长 廊 情感 测试 经 典 搞笑 动画 欣赏 


©®®® We 


poeml.html poem2.html poem3.html 


9-2 网 站 的 链接 结构 


9.2.2 ”创建 Dreamweaver 本 地 站 点 


站 点 规划 完成 后 ， 即 可 在 Dreamweaver 中 进行 本 地 站 点 的 创建 ， 实际 上 就 是 建立 
Dreamweaver 站 点 的 工作 目录 ， 创 建 本 地 文件 夹 的 存储 位 置 。 

例 9-1 创建 Dreamweaver 本 地 站 点 。 

入 启动 Dreamweaver CS4 后 ,选择 【站 点 】| 【新建 站点】 命令 ,打开 站 点 定义 向 导 ， 
如 图 9-3 所 示 。 输 入 站 点 的 名 称 ， 如 “ 花 蝶 古 ”。 

称 单 击 【 下 一 步 】 按钮, 如 果 网 页 要 使 用 诸如 ASP、PHP 等 服务 器 技术 , 请 选中 【是 ， 
我 想 使 用 服务 器 技术 】〗。 这 里 选中 【 否 ， 我 不 想 使 用 服务 器 技术 】〗， 这 样 一 来 创建 的 为 更 
态 站 点 ， 如 图 9-4 所 示 。 
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图 9-3 为 网 站 命名 图 9-4 选择 是 否 使 用 服务 器 技术 
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各 单 击 【下 一 步 】 按 钮 ， 选择 如 何 创建 站 点 , 是 首先 在 本 地 完成 后 再 上 传 还 是 直接 在 
服务 器 上 进行 编辑 。 建 议 先 在 本 地 编辑 并 调试 好 后 ， 再 将 站 点 上 传 到 远程 服务 器 上 。 这 里 
选择 【编辑 我 的 计算 机 上 的 远程 副本 ， 完 成 后 再 上 传 到 服务 器 】 方 式 。 然 后 设置 本 地 文件 
夹 的 存储 位 置 ， 如 图 9-5 所 示 。 

从 单 击 【 下 一 步 】 按 钮 ， 选 择 如 何 连接 到 远程 服务 器 ， 这 里 选择 【无 】 方 式 ， 如 图 
9-6 所 示 。 
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图 9-5 选择 如 何 编辑 站 点 以 及 站 点 的 存储 位 置 图 9-6 选择 如 何 连接 到 服务 器 


人 @ 单 击 【 下 一 步 】 按 钮 ， 确 认 本 地 站 点 的 信息 是 否 有 误 ， 可 单 击 【 上 一 步 】 按 钮 重新 
设置 。 如 果 无 误 ， 单 击 【和 完成】 按钮 ， 即 可 完成 本 地 站 点 的 创建 ， 如 图 9-7 所 示 。 
提示 : 用 户 也 可 以 切换 到 【高 级 】 选 项 卡 ， 快 速 完成 对 【本 地 信息 】 的 设置 ,如 图 9-8 
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9-7 ”完成 本 地 站 点 的 创建 图 9-8 【高 级 】 选 项 卡 


9.2.3 创建 和 管理 本 地 文件 、 文 件 夹 


本 地 站 点 创建 好 后 ， 用 户 即 可 根据 站 点 规划 来 创建 各 个 频道 或 栏目 文件 夹 ， 以 存储 相 
关 的 文件 和 资源 。 
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例 9-2 在 本 地 站 点 中 新 建 和 管理 文件 夹 、 文 件 。 

入 继续 例 9-1。 选 择 【 窗 口 】| 【文件 】 命 令 ， 打开 【文件 】 面 板 。 在 站 点 根 目录 上 右 
击 鼠 标 ， 从 弹出 的 快捷 菜单 中 选择 【新 建文 件 夹 】 命 令 ， 如 图 9-9 所 示 。 

各 Dreamweaver 将 自动 在 站 点 根 目录 下 创建 一 个 名 为 untitled 的 新 文件 夹 并 处 于 可 编 
辑 状 态 ， 重 命名 文件 夹 后 ， 按 Enter 键 确 认 即 可 。 

人 @ 用 同样 的 方法 完成 其 他 文件 夹 的 创建 , 然后 将 相关 的 资源 (如 图 片 等 ) 复 制 到 相关 的 
文件 夹 中 ， 如 图 9-10 所 示 。 


EEZD [>] [本 地 视 田 。 [x] 


如 G5 人 Hy 全 | 司 


[本 地 文件 | 
日 国 站 点 - 花 蝶 古 tL.. 习 
Poem 文件 3 
Tenplates 文件 3 
back gif 2 era 
bottom. htnl 118 wr 
button 1.gif 3KB Nerol 
button 1_2.gif 7KB Neroll 
button 21.gif 。 4IB Nerol3 
button 2.2.gif TKB Nerol 
button 3_1.gif 4KB Nerol 
button 3.2.gif TEB Nerol 
button 41. gif 3KB Nerol 
button 4.2.gif 7KB Neroll 
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图 9-9 在 本 地 站 点 中 创建 文件 夹 图 9-10 向 本 地 站 点 复制 资源 


@@ 如 果 要 创建 网 页 文档 , 可 右 击 要 存放 该 页 面 的 文件 夹 , 从 弹出 菜单 中 选择 【新 建文 
件 】 命 令 ，Dreamweaver 将 自动 在 该 目录 下 创建 一 个 名 为 untitled.html 的 新 文件 并 处 于 可 
改写 状态 ， 对 其 重新 命名 即 可 ， 然 后 就 可 以 设计 该 页 面 了 。 使 用 相同 的 方法 可 创建 并 设计 
其 他 页 面 。 

人 @ 要 删除 站 点 中 某 个 不 用 的 文件 或 文件 夹 ， 可 选中 后 直接 按 Delete 键 。Dreamweaver 
会 提示 用 户 是 否 确定 删除 该 文件 ， 单 击 【 是 】 按 钮 即 可 。 

人 @ 如 果 要 重 命名 某 个 文件 或 文件 夹 ， 可 选中 后 单 击 以 使 其 进入 改写 状态 ,然后 重新 
命名 即 可 。 如 果 该 文件 具有 链接 ，Dreamweaver 会 提示 是 否 自动 更 新 与 该 文件 相关 的 所 
有 链接 。 

耻 如 果 要 编辑 某 个 页 面 文档 ， 直 接 双 击 即 可 在 【设计 】 视 图 中 打开 它 。 


9.2.4 管理 Dreamweaver 本 地 站 点 
本 地 站 点 创建 完成 后 ， 如 果 需 要 修改 站 点 的 设置 ， 例 如 需要 创建 测试 站 点 、 远 程 站 点 


hao_ 
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等 ， 则 可 以 对 站 点 进行 重新 设置 。 

选择 【站 点 】|【 管 理 】 站 点 命令 ， 打 开 【 站 点 管理 】 对 话 框 ， 如 图 9-11 所 示 。 选 择 
要 编辑 的 站 点 ， 单 击 【编辑 】 按 钮 ， 即 可 重新 打开 【站 点 定义 为 】 对 话 框 ， 可 对 站 点 的 本 
地 信息 、 远 程 信息 、 测 试 服务 器 等 进行 重新 设置 。 

如 果 站 点 已 经 制作 并 上 传 成 功 , 可 以 将 其 从 Dreamweaver 本 地 站 点 列表 中 删除 。 在 【 管 
理 站 点 】 对 话 框 中 选择 要 删除 的 站 点 ， 单 击 【 删 除 】 按 钮 ， 在 打开 的 提示 框 中 单 击 【 是 】 
按钮 即 可 ， 如 图 9-12 所 示 。 


[Bremveaver 
企 人 
再 陈 过 中 的 外 点 吗 ? 
Ea | 
图 9-11 【管理 站 点 】 对 话 框 图 9-12 删除 Dreamweaver 本 地 站 点 
本 章 小 结 


多 个 网 页 通过 链接 并 形成 了 网 站 ， 网 站 是 对 网 页 和 资源 的 有 效 组 织 。Dreamweaver 提 
供 了 强大 的 建站 和 站 点 管理 功能 。 本 章 重点 介绍 本 地 站 点 的 创建 和 管理 方法 ， 因 为 通常 情 
况 下 ， 设 计 者 都 是 先 在 本 地 对 网 站 进行 设计 和 调试 ， 之 后 才 将 其 上 传 到 网 站 服务 器 上 。 学 
习 完 本 章 之 后 ， 用 户 就 可 以 通过 建立 网 站 来 对 网 页 文件 和 资源 进行 管理 了 。 下 一 章 向 读者 
介绍 如 何 通 过 Dreamweaver 的 框架 和 模板 功能 来 实现 “ 花 蝶 古 ” 站 点 的 具体 内 容 。 


习 题 

填空 题 

1. 网 站 要 在 Internet 上 存在 ， 必 须 有 一 个 存储 网 站 内 容 的 。 同 时 ， 还 要 有 一 个 用 于 访问 该 网 站 
的 

2. 在 网 站 的 和 被 确定 后 ， 就 可 以 开始 正式 实施 网 站 的 建设 了 。 

3. Dreamweaver 站 点 由 、 和 测试 服务 器 文件 夹 3 部 分 组 成 ， 其 具体 结构 取决 于 开发 环 
境 和 所 开发 的 Web 站 点 类 型 。 

4. 网 站 的 结构 包括 和 ， 这 两 种 结构 之 间 既 有 区 别 又 有 联系 。 

简 答 题 


5. 什么 是 网 站 的 域名 ? 

6. 简 述 Dreamweaver 的 站 点 类 型 。 

上 机 操作 题 

7. 参考 图 9-13 所 示 的 一 个 房 企 网 站 ， 对 该 站 点 进行 规划 。 
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9-13 ”站 点 规划 草图 
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第 10 章 


使 用 框架 、 模 板 和 库 


本 章 主要 介绍 如 何 使 用 Dreamweaver 的 框架 和 模板 功能 ， 以 实现 第 9 章 创建 的 “ 花 蝶 
古 ” 网 站 的 具体 内 容 。 通 过 本 章 的 学 习 ， 应 该 完成 以 下 学 习 目 标 : 

i 了 解 框架 和 框架 集 

了解 Dreamweaver 预 置 的 框架 布局 

好” 学 会 创建 和 编辑 框架 页 面 

iY 掌握 模板 的 创建 和 编辑 方法 

iY 学 会 为 网 页 应 用 模板 

fy” 掌握 模板 的 管理 方法 

f 了 解 嵌 套 模板 

WY 了解 并 学 会 使 用 库 


10.1 使 用 框架 


通过 框架 ， 用 户 可 以 十 分 方便 地 实现 网 页 的 定位 。 与 其 他 定位 方式 不 同 ,框架 可 以 将 一 
个 页 面 划分 为 多 个 区 域 ， 在 每 个 区 域 显示 不 同 的 网 页 文档 。 例 如 ， 一 个 框架 显示 主题 列表 ， 
而 另 一 个 框架 则 显示 单 击 不 同 主题 时 所 对 应 的 内 容 页 面 ， 这 种 情况 在 聊天 室 、 网 上 论坛 中 比 
较 常 见 ， 如 图 10-1 所 示 。 
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10.1.1 框架 和 框架 集 


框架 实际 上 由 两 部 分 组 成 : 框架 和 框架 集 。 框 架 就 是 网 页 中 被 分 割 开 的 各 个 部 分 ， 每 
部 分 都 是 一 个 完整 的 页 面 文档 。 网 页 中 的 各 个 框架 组 成 框架 集 。 框 架 集 实际 也 是 一 个 网 页 
文档 ， 用 于 定义 文档 中 框架 的 结构 、 数 量 、 尺 寸 以 及 装 入 框架 的 页 面 。 因 而 ， 框 架 集 并 不 
显示 在 浏览 器 中 ， 只 是 存储 了 一 些 框架 如 何 显示 的 信息 。 例 如 ， 图 10-2 所 示 的 框架 页 面 就 
包含 了 框架 集 和 3 个 框架 ， 因 此 ， 与 之 对 应 的 网 页 文档 也 就 有 4 个。 


框架 集 mndex htm 
框架 一 top htm 


框架 二 
1ef.htm Tight.htm 


图 10-2 ”框架 示例 


框架 集 被 称 为 父 框架 ， 相 应 的 框架 就 被 称 为 子 框架 。 当 用 户 将 某 个 页 面 划分 为 若干 个 
框架 后 ， 既 可 以 独立 地 操作 各 个 框架 ， 分 别 创建 新 文档 ， 也 可 以 为 框架 指定 已 经 制作 好 的 
页 面 文档 。 用 户 可 以 通过 选择 【查看 】|【 可视化 助理 】| 【框架 边框 】 命令 来 显示 或 隐藏 框 
架 的 边框 。 

框架 最 常见 的 用 途 就 是 导航 , 但 是 设计 框架 的 过 程 可 能 比较 复杂 , 并 且 在 许多 情况 下 ， 
通过 使 用 其 他 技术 也 可 以 达到 框架 页 面 的 效果 。 

框架 技术 自从 推出 以 来 就 成 了 一 个 争论 不 休 的 话题 。 一 方面 ， 它 可 以 将 浏览 器 显示 空 
间 分 割 成 几 个 部 分 ， 每 个 部 分 独立 显示 不 同 页 面 ， 同 时 对 于 整个 网 页 设计 的 整体 性 的 保持 
也 是 有 利 的 。 但 另 一 方面 ， 对 于 不 支持 框架 结构 的 浏览 器 , 页面 信息 不 能 正常 显示 。 因 而 ， 
用 户 在 使 用 框架 页 面 时 ， 应 注意 在 框架 集中 提供 noframes 部 分 ， 以 方便 那些 不 能 正常 显示 
框架 页 面 的 访客 。 


10.1.2 创建 和 编辑 框架 页 面 


Dreamweaver CS4 提供 了 15 种 预 置 的 框架 集 ， 以 方便 用 户 快速 地 创建 框架 页 面 。 用 户 
可 通过 以 下 两 种 方法 来 使 用 这 些 框架 集 : 

? 选择 【文件 】 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 。 在 【示例 的 页 】 类 别 下 
选中 【框架 页 】 选 项 ， 在 【示例 页 】 列 表 中 单 击 预 置 的 框架 布局 ， 可 在 右 侧 预览 该 
框架 的 布局 效果 ， 如 图 10-3 所 示 。 单 击 【 创 建 】 按 钮 ， 即 可 基于 选择 的 框架 布局 
创建 框架 页 面 。 

? 用 户 也 可 以 在 建立 网 页 文档 后 ， 单 击 【 插 入 】 面 板 的 【布局 】 类 别 下 的 【框架 】 按 
钮 组 ， 从 弹出 的 选项 中 选择 要 使 用 的 框架 布局 ， 如 图 10-4 所 示 。 
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10-3 通过 【新 建文 档 】 对 话 框 创建 框架 页 面 10-4 通过 【框架 】 下 拉 
按钮 创建 框架 页 面 


通常 情况 下 ，Dreamweaver 预 置 的 框架 布局 并 不 能 完全 满足 设计 需要 。 此 时 ， 用 户 可 
在 最 接近 所 需 设 计 的 内 置 框架 上 进行 修改 ， 使 之 逐步 完善 并 满足 设计 要 求 。 

例 10-1 创建 “ 花 蝶 古 ”站 点 的 poem.htm 页 面 。 

六 启动 Dreamweaver CS4，, 打开 【文件 】 面 板 。 在 顶部 的 左 侧 下 拉 列 表 框 中 选择 【 花 
蝶 古 】， 在 右 侧 下 拉 列 表 中 选择 【本 地 视图 】， 打 开 “ 花 蝶 古 ?站 点 。 站 点 的 首页 已 经 设计 
完成 ， 其 预览 效果 如 图 10-5 所 示 。 中 间 的 6 个 图 片 是 鼠标 经 过 图 像 ， 单 击 后 会 链接 到 不 同 
的 页 面 。“ 诗 意 长 廊 ” 链 接 到 的 即 为 本 例 要 设计 的 poem.htm 页 面 。 


Welcome to 
攻 赋 办 


10-5 设计 好 的 “ 花 蝶 古 ”站 点 首页 


@@ 选择 【文件 】 | 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 。 在 【示例 的 页 】 类 别 下 
选中 【框架 页 】 选 项 ， 在 【示例 页 】 列 表 中 单 击 【上 方 固定 】 选 项 ， 单 击 【创建 】 按 钮 。 
在 打开 的 【框架 标签 辅助 功能 属性 】 对 话 框 中 ， 系 统 已 经 为 每 个 框架 制定 了 一 个 标题 ， 如 
图 10-6 所 示 ， 单 击 【确定 】 按 钮 ， 即 可 创建 指定 布局 的 框架 页 面 。 
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从 将 光标 置 于 顶部 的 框架 中 ， 在 按 住 Alt 键 的 同时 单 击 ， 可 选中 顶部 的 框架 ， 如 图 
10-7 所 示 。 
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|】 站 志 是 撞 入 台 四 时 不 春 地 入 后 二 息 

| 汗 昌 下 坟 有 蕊 的 入流 学 打 。 

| 攻 

图 10-6 【框架 标签 辅助 功能 属性 】 图 10-7 选择 顶部 框架 
对 话 框 


人 @@ 在 属性 检查 器 中 ， 用 户 可 以 修改 框架 的 名 称 、 边 框 的 颜色 ， 以 及 是 否 设置 滚动 等 ， 
如 图 10-8 所 示 。 另 外 ， 通 过 【 源 文件 】 文 本 框 ， 可 以 验证 框架 是 被 作为 独立 页 面 保存 的 。 
- 5 
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图 10-8 框架 的 属性 检查 器 


@@ 选择 【文件 】|【 保 存 全 部 】 命 令 ， 会 同时 将 框架 集 网 页 文档 及 其 所 有 的 框架 网 页 
文档 进行 保存 ， 如 图 10-9 所 示 。 
Th 
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图 10-9 保存 框架 和 框架 集 


提示 : 当 用 户 保存 框架 和 框架 集 时 ， 框 架 页 面 中 被 保存 的 框架 周围 会 显示 黑色 边框 。 
很 明显 ， 图 10-9 中 即将 保存 的 是 顶部 的 框架 。【 文 件 】|【 保 存 全 部 】 命 令 常用 于 首次 对 
框架 及 框架 集 网 页 文档 保存 时 使 用 。 

@@ 用 户 也 可 以 单独 对 框架 页 面 中 的 某 个 框架 保存 。 选 中 该 框架 后 , 选择 【文件 】|【 保 
存 框架 】 命 令 即 可 。 如 果 要 对 框架 集 保存 ,可 首选 单 击 框架 集 的 边框 将 其 选中 (选中 的 框架 
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集 包 含 的 所 有 框架 边框 将 呈现 虚线 ， 如 图 10-10 所 示 )， 然 后 选择 【文件 】| 【保存 框架 页 】 


全 -人 
命令 。 


图 10-10 选中 整个 框架 集 
人 @ 将 光标 定位 到 top.htm 框架 页 面 ， 单 击 属性 检查 器 的 【页 面 属性 】 按 钮 ， 为 该 框架 


页 面 设置 背景 图 像 , 同 理 , 为 底部 的 bottom.htm 框架 页 面 也 设置 背景 图 像 , 效果 如 图 10-11 
所 示 。 
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图 10-11 为 框架 页 面 设置 背景 图 像 


人 @ 将 光标 定位 到 top.htm 框架 页 面 ,在 上 面 绘制 一 个 AP Div, 将 宽度 设置 为 400 像素 ， 
高 度 设置 为 35 像素 ,在 该 AP Div 内 插入 一 个 表格 ,并 在 表格 中 插入 一 个 列表 。 定 义 AP Div 
及 其 中 列表 的 CSS 规则 代码 如 下 所 示 : 


SE TE 


#apDivmenut{ 
width:800px; 
height:30px; 
clear: both; 
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background-repeat: repeat-x; 

了 

#apDivmenu 1i{ 

float=letts 

font-size:15px; 

} 

#apDivmenu 1i af 
font-size:14px; 
margin-right:5px; 
color:#CCFFOO; 
text-decoration:none; 
padding-top: Opx; 
padding-right: 5S5px; 
padding-bottom: Opx; 
padding-left: Spx; 

} 

#apDivmenu 1i a:hovert{ 

color:#FFFFOO; 

} 

#apDivmenu ul{ 
line-height:30px; 
margin-left:25px; 

} 

#apDivmenu .do ai 

background:none; 

font-weight:bold; 
color:#CCFFOO0; 
text-decoration:none; 

} 

#apDivmenu .do a:hovert{ 

color:#FFFFOO; 

} 

#apDivmenu { 
position:absolute; 
left:300px; 

下 OBEZ2PX2 
width:400px; 
height:35px; 
z-index:1; 


此 时 top.htm 的 效果 如 图 10-12 所 示 。 


10-12 ”顶部 框架 top.htm 的 效果 
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人 @ 在 top .htm 中 选中 文本 “欣赏 作品 一 ”， 在 属性 检查 器 中 的 【链接 】 文 本 框 设置 超 


级 链接 ， 并 在 【目标 】 下 拉 列 表 框 中 选择 “mainFrame” 。 这 样 一 来 ， 当 访客 单 击 该 链接 
时 ， 链 接 的 目标 页 面 将 显示 在 底部 的 bottom.htm 页 面 中 。 

鸯 用 同样 的 方法 设置 “欣赏 作品 二 ”、“ 欣 赏 作品 三 ”、“ 欣 赏 作品 四 ”的 超 链接 。 
选择 【文件 】| 【保存 全 部 】〗 命 令 ， 然 后 预览 页 面 ， 效 果 如 图 10-13 所 示 。 


图 10-13 ”框架 页 面 预 览 效果 


提示 : 用 户 可 以 发 现 ，bottom.htm 中 显示 的 链接 页 面 有 很 多 相似 之 处 ,包括 布局 、 背 
景 等 。 下 面 将 介绍 如 何 使 用 Dreamweaver CS4 的 模板 功能 来 设计 它们 ， 以 提高 用 户 的 工 
作 效 率 。 


思 在 设计 过 程 中 ， 如 何 拆 分 框架 ， 或 删除 某 个 无 用 的 框架 ? 
所 将 光标 定位 到 要 拆 分 的 框架 中 ， 按 住 Alt 键 的 同时 ， 将 光标 移 到 框架 边框 上 ， 当 变 成 双向 


箭头 时 ， 单 击 鼠 标 并 拖 动 至 适当 位 置 ， 即 可 在 该 位 置 将 该 框架 拆 分 。 要 删除 某 个 无 用 的 框架 ， 
可 将 光标 移 到 要 删除 框架 的 边框 ， 拖 动 其 到 页 面 外 即 可 。 


10.2 使 用 模板 


利用 模板 ， 对 于 网 页 中 重复 的 部 分 ， 用 户 只 需 制作 一 次 。 在 基于 模板 创建 网 页 时 ， 
Dreamweaver 会 自动 生成 共用 的 部 分 。 模 板 实 际 上 也 是 网 页 文档 ， 只 是 在 模板 文档 中 添加 
了 模板 标记 。 在 Dreamweaver 中 ， 模 板 的 扩展 名 为 .dwt， 并 存放 在 本 地 站 点 的 Template 文 
件 夹 中 。 


10.2.1 创建 并 编辑 模板 


用 户 可 以 将 已 经 创建 好 的 网 页 另存 为 模板 ， 也 可 以 从 空白 模板 开始 进行 创建 。 但 无 论 
何 种 方式 ， 用 户 都 需要 定义 模板 中 可 以 编辑 的 区 域 ， 否 则 基于 该 模板 创建 的 网 页 将 无 法 编 
辑 ， 这 也 将 失去 模板 应 有 的 作用 。 

例 10-2 创建 并 编辑 模板 。 

各 首先 设计 好 例 10-1 中 “欣赏 作品 一 ”所 链接 的 页 面 ， 如 图 10-14 所 示 。 选 择 【 文 
件 】|【 另 存 为 模板 】 命 令 ， 打 开 【 另 存 为 模板 】 对 话 框 ， 如 图 10-15 所 示 。 

加 在 【站 点 】 下 拉 列 表 框 中 选择 保存 模板 的 站 点 ,输入 模板 的 名 称 ， 单 击 【 保 存 】 按 


139 | 


加 Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


钮 ， 模 板 文件 即 被 保存 在 指定 站 点 的 Templates 文件 夹 中 。 
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图 10-14 设计 好 的 网 页 图 10-15 将 页 面 另存 为 模板 


加 下 面 来 指定 模板 中 的 可 编辑 区 域 , 即 通过 模板 创建 的 网 页 中 可 以 进行 添加 、 修改 和 
删除 网 页 元 素 的 区 域 。 将 光标 定位 到 诗歌 文本 处 ,在 标签 选择 器 选中 <table.time#Message> 
标记 ,在 【插入 】 面 板 的 【常用 】 类 别 下 单 击 【 模 板 】 按 钮 组 固 "， 从 弹出 的 菜单 中 单 击 

【可 编辑 区 域 ] 命 令 , 在 打开 的 【新 建 可 编辑 区 域 】 对 话 框 中 对 该 区 域 进行 命名 , 如 图 10-16 
所 示 。 
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图 10-16 创建 可 编辑 区 域 


人 @ 单 击 【确定 】 按 钮 ,模板 中 被 指定 的 可 编辑 区 域 以 绿色 高 亮 方 式 显示 。 选 中 诗歌 文 
本 左 侧 的 图 片 , 在 标签 选择 器 单 击 <img.time#isurido20img> 标 记 , 用 同样 的 方法 将 其 指定 为 
可 编辑 区 域 ， 并 命名 为 “诗歌 图 片 ”。 

人 @ 如 果 用 户 需要 对 指定 的 可 编辑 区 域 重 新 命名 , 可 单 击 左 上 角 的 标记 将 其 选中 , 然后 
在 属性 检查 器 中 的 【和 名称】 文本 框 中 进行 修改 即 可 。 最 后 保存 模板 。 

提示 : 如 果 用 户 需 要 取消 可 编辑 区 域 ， 可 在 可 编辑 区 域 的 标签 上 右 击 ， 然 后 从 弹出 菜 
单 中 单 击 【 删 除 标签 】 命 令 即 可 。 

除了 可 以 在 模板 中 指定 可 编辑 区 域外 ,用 户 还 可 以 指定 模板 中 的 重复 区 域 和 可 选区 域 。 
所 谓 重复 区 域 ， 是 指 模板 中 可 以 根据 需要 在 基于 模板 的 页 面 中 复制 任意 次 数 的 部 分 。 重 复 
区 域 常用 于 表格 ,但 有 时 也 可 以 为 其 他 元 素 定义 重复 区 域 。 需 要 注意 的 是 ， 重 复 区 域 不 是 
可 编辑 区 域 。 

可 选区 域 是 指 模板 中 可 通过 定义 条 件 来 控制 显示 或 隐藏 的 部 分 。Dreamweaver 中 存在 
两 种 可 选区 域 : 可 编辑 的 和 不 可 编辑 的 。 对 于 不 可 编辑 的 可 选区 域 ， 用 户 只 能 设置 其 显示 
或 隐藏 状态 ， 而 对 于 可 编辑 的 可 选区 域 ， 用 户 还 可 以 对 其 进行 编辑 。 


ao _ 


10.2.2 ”通过 模板 创建 网 页 


创建 了 模板 后 ， 便 可 以 基于 该 模板 来 创建 网 页 ， 也 可 以 将 模板 直接 应 用 到 已 经 创建 好 
的 网 页 上 , 但 我 们 通常 更 倾向 于 使 用 前 者 .下面 的 例子 介绍 如 何 基于 例 10-2 的 模板 创建 < 欣 
赏 作 品 二 ”的 链接 页 面 。 

例 10-3 基于 模板 创建 网 页 。 


各 选择 【文件 】| 【新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 。 在 【模板 中 的 页 】 下 选 
中 例 10-2 创建 的 模板 【诗歌 欣赏 】， 单 击 【 创 建 】 按 钮 ， 如 图 10-17 所 示 。 【文档 】 窗 口 
中 新 建 的 页 面 如 图 10-18 所 示 。 
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图 10-17 【新 建文 档 】 对 话 框 


图 10-18 选中 “诗歌 内 容 ” 可 编辑 区 域 


加 下 面 来 编辑 页 面 内 容 。 用 光标 单 击 “诗歌 内 容 ” 绿 色 标记 ,选中 该 编辑 区 域 。 将 诗 
歌 的 标题 “这 样 的 夜 ”替换 为 “天 边 那 条 淡淡 的 云 ”， 将 诗歌 内 容 也 进行 相应 的 替换 。 
各 选择 “诗歌 图 片 ”绿色 标记 ， 将 图 片 更 改 成 图 10-19 所 示 。 
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图 10-19 ”修改 后 的 效果 


人 @ 保存 并 ,效果 如 图 10-13 右 图 所 示 。 用 同样 的 方法 基于 “诗歌 欣赏 ”模板 
创建 “欣赏 作品 三 ” As 作品 四 ”的 链接 页 面 。 


10.2.3 ”管理 模板 


在 编辑 通过 模板 创建 的 网 页 时 ， 如 果 发 现 模板 的 某 处 内 容 需 要 修改 , 可 以 选择 【修改 】 
I【 模 板 】I【 打 开 附 加 模板 】 命 令 ， 打 开 该 页 面 所 基于 的 模板 进行 修改 。 修 改 完 并 对 模板 进 
行 保存 时 ，Dreamweaver 会 打开 提示 框 询问 是 否 更 新 站 点 中 该 模板 创建 的 页 面 ， 此 时 ， 单 
击 【 更 新 】 按 钮 即 可 更 新 通过 该 模板 创建 的 所 有 网 页 。 

如 果 需 要 ， 用 户 还 可 以 将 网 页 脱离 模板 ， 以 便 对 页 面 中 的 任何 内 容 进行 编辑 ， 而 不 仅 
仅 局 限于 指定 的 编辑 区 域 。 选 择 【 修 改 】|【 模 板 】|【 从 模板 中 分 离 】 命 令 即 可 。 

对 于 不 再 使 用 的 模板 ， 用 户 可 以 将 其 从 站 点 中 删除 。 在 【文件 】 面 板 中 选择 要 删除 的 
模板 ， 按 Delete 键 即 可 。Dreamweaver 会 提示 与 该 模板 相关 联 的 网 页 数 ， 并 询问 是 否 确定 
要 删除 该 模板 。 


10.2.4 关于 肉 套 模板 


嵌 套 模板 是 基于 模板 的 模板 ， 也 就 是 说 ， 用 户 必 须 先 创 建 基本 模板 ， 然 后 才 可 以 在 基 
本 模板 的 基础 上 创建 嵌 套 模板 。 在 嵌 套 模板 中 ， 可 以 在 基本 模板 中 指定 可 编辑 的 区 域 中 进 
一 步 指定 可 编辑 区 域 。 

要 创建 姐 套 模板 ， 用 户 可 首先 在 Dreamweaver 中 打开 基本 模板 。 然 后 选择 【插入 】| 
【模板 对 象 】 【创建 髓 套 模板 】 命 令 , 在 打开 的 对 话 框 中 选择 模板 位 于 的 站 点 并 进行 命名 
之 后 便 可 以 在 嵌 套 模板 的 可 编辑 区 域 中 指定 新 的 可 编辑 区 域 了 。 


10.3 使 用 库 


库 用 来 存放 文档 中 的 页 面 元 素 ， 如 图 像 、 文 本 、Flash 动画 等 。 这 些 页 面 元 素 通常 被 ) 
泛 应 用 于 整个 站 点 ， 并 且 能 被 重复 使 用 或 经 常 更 新 ， 因 此 它们 被 称 为 库 项 目 。 当 建立 布局 
各 异 、 但 是 具有 相同 网 页 元 素 的 网 站 时 ， 可 以 将 相同 的 元 素 创建 为 库 项 目 ， 然 后 通过 更 改 
库 项 目 来 更 改 每 一 个 网 页 中 的 相同 元 素 ， 从 而 达到 更 新 网 站 的 功能 。 库 项 目 文件 的 扩展 名 
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为 .lbi， 所 有 的 库 项 目 都 被 保存 在 一 个 文件 中 ， 且 库 项 目的 默认 保存 文件 夹 为 Library。 
任意 <body> 标 签 内 的 对 象 ， 包 括 文本 、 表 格 、 表 单 、 图 像 、Flash 动画 、Java Applet、 


插件 等 都 可 以 作为 库 元 素 。 用 户 可 以 首先 创建 一 个 空 自 库 项 四 me 
目 , 然后 向 其 中 添加 库 元 素 , 也 可 以 基于 选择 的 页 面 元 素来 创 “| 要 
建 库 项 目 。 国 吾 
在 【资源 】 面 板 中 单 击 【 库 】 按 钮 IDg， 然 后 单 击 面板 底 “| 此 
部 的 【新 建 库 项 目 】 按 钮 | 久 |， 即 可 创建 一 个 默认 为 untitled 的 “| 人 
库 项 目 ， 站 点 中 也 会 自动 创建 Library 文件 夹 ， 用 于 保存 该 库 “区 


项 目 ， 如 图 10-20 所 示 。 如 果 想 将 现 有 网 页 文档 的 某 些 元 素 创 
建 为 库 项 目 ， 可 首先 在 文档 中 选中 这 些 元 素 ， 然 后 单 击 【新 建 
库 项 目 】 按 钮 。 

库 项 目的 属性 面板 如 图 10-21 所 示 。 在 【资源 】 面 板 中 是 图 10.20 新 建 库 项 上 
无 法 编辑 库 项 目的 ， 选 中 库 项 目 后 ， 单 击 属性 检查 器 中 的 【打开 】 按 钮 ， 可 将 库 项 目 文件 
打开 ， 从 而 对 其 进行 编辑 。 要 在 网 页 中 插入 库 项 目 时 ， 可 首先 将 光标 定位 到 要 插入 的 位 置 ， 
然后 在 【资源 】 面 板 中 选中 要 插入 的 库 项 目 ， 单 击 底部 的 【插入 】 按钮 即 可 ， 


一 Sre /Library/Untitled2.1bi [打开] [从 源 文件 中 分 高] 
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图 10-21 库 项 目的 属性 检查 器 


当 库 项 目 被 插入 到 网 页 文档 中 后 , 并 不 能 在 文档 中 直接 编辑 。 要 想 在 文档 中 直接 编辑 ， 
可 以 选中 插入 的 库 项 目 ， 单 击 属 性 检查 器 中 的 【从 源 文件 中 分 离 】 按 钮 ， 将 库 项 目 转换 为 
普通 的 页 面 元 素 ， 就 可 以 进行 编辑 了 。 

编辑 完 库 项 目 后 ， 按 Ctrl+S 键 进行 保存 ，Dreamweaver 会 弹出 【更 新 页 面 】 对 话 框 ， 
询问 是 否 自动 更 新 所 有 与 之 相关 的 网 页 。 下 面 的 例子 介绍 如 何 创建 库 项 目 并 通过 它 来 更 新 
网 站 内 容 。 

例 10-4 使 用 库 更 新 网 站 内 容 。 

人 @@ 启动 Dreamweaver CS4, 利用 【文件 】 面 板 打 开 “ 花 蝶 古 ”站 点 的 本 地 视图 。 双 击 
“诗歌 欣赏 一 ”链接 的 页 面 11.html， 在 【设计 】 视 图 中 打开 它 。 

加 单 击 以 选中 页 面 左 上 角 的 图 像 ， 在 【资源 】 面 板 中 单 击 【 库 】 按 钮 ， 然 后 单 击 面板 
底部 的 【新 建 库 项 目 〗 按 钮 ， 创 建 一 个 命名 为 photo 的 库 项 目 ， 如 图 10-22 所 示 。 

各 下 面 来 编辑 该 库 项 目 。 在 【资源 】 面 板 中 双击 库 项 目 , 可 在 【文档 】 窗 口中 打开 它 ， 
如 图 10-23 所 示 。， 


图 10-22 将 页 面 图 像 创建 为 库 项 目 图 10-23 在 【文档 】 窗 口中 打开 库 项 目 
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@@ 双击 图 片 , 打开 【选择 图 像 源 文件 】 对 话 框 。 重 新 指定 库 项 目 中 的 图 片 , 如 图 10-24 


所 示 。 
i ee ee ee 
oa 34 一 一 一 一 一 一 
et ' p= ms 
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图 10-24 ”修改 库 项 目 


加 按 Ctrlts 键 保存 修改 ， 在 打开 的 【更 新 库 项 目 】 对 话 框 中 选择 是 否 更 新 列表 中 的 
文件 ， 单 击 【更 新 】 按 钮 ， 如 图 10-25 所 示 。 

人 @@ 在 打开 的 【更 新 页 面 】 对 话 框 中 ， 选 择 更 新 的 范围 ， 如 图 10-26 所 示 。 
Ee CE 


图 10-25 选择 是 否 更 新 列表 中 的 文件 图 10-26 选择 更 新 的 范围 


从 选择 【修改 】|【 库 】|【 更 新 页 面 】 命 令 ， 可 更 新 整个 站 点 或 所 有 使 用 该 特定 库 项 
目的 文档 。 nt 【修改 】|【 库 】|【 更 新 当前 页 】 命 令 ， 可 更 新 当前 文档 以 适应 库 项 目的 当 
前 版 本 。 预 览 更 新 后 的 11.html 文档 ， 效 果 如 图 10-27 所 示 。 


图 10-27 使 用 库 项 目 更 新 后 的 网 页 


注意 : 使 用 库 之 前 ， 用 户 必须 先 创建 站 点 ， 否 则 Dreamweaver 会 提示 无 法 使 用 库 。 
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本 章 小 结 


使 用 框架 可 以 在 浏览 器 的 不 同位 置 显示 不 同 的 页 面 内 容 ， 并 且 各 个 框架 之 间 是 相互 独 
立 的 。 在 网 络 带 宽 有 限 的 情况 下 ， 使 用 框架 可 以 避免 浏览 器 中 相同 内 容 的 重复 下 载 ， 提 高 
访客 的 浏览 速度 。 当 需要 创建 具有 重复 内 容 的 网 页 时 ， 使 用 模板 是 不 错 的 选择 。 而 当 需 要 
在 不 同 网 页 布局 中 更 改 相 同 元 素 时 ， 使 用 库 则 具有 很 大 的 灵活 性 。 

本 章 对 框架 、 模 板 和 库 的 基本 概念 和 使 用 方法 进行 了 讲解 ， 并 各 自 提供 了 示例 。 下 一 
章 向 读者 介绍 如 何 对 创建 好 的 本 地 站 点 在 Internet 上 进行 发 布 。 


习 题 


填空 题 

可 以 将 一 个 页 面 划分 为 多 个 区 域 ， 在 每 个 区 域 显示 不 同 的 网 页 文档 。 

2. 在 基于 模板 创建 网 页 时 ，Dreamweaver 会 自动 生成 共用 的 部 分 ， 模 板 的 扩展 名 为 。 

3. 是 基于 模板 的 模板 。 

4. 当 建 立 布局 各 异 、 但 是 具有 相同 网 页 元 素 的 网 站 时 ， 可 以 将 相同 的 元 素 创建 为 ， 然 后 通过 更 
改 它 来 更 改 每 一 个 网 页 中 的 相同 元 素 ， 从 而 达到 更 新 网 站 的 功能 。 

选择 题 

5. 必须 在 模板 中 指定 ( ” )， 否 则 基于 该 模板 的 网 页 将 无 法 编辑 。 
A. 可 编辑 区 域 B. 重复 区 域 C. 可 选区 域 

6. 在 处 理 浏览 器 不 能 显示 的 框架 内 容 时 ， 可 在 网 页 的 (  ) 标 记 之 间 插 入 提示 信息 。 


A. <noframes> 和 </noframes> B. <font> 和 </font> 


C. <body> 和 </body> D. <title> 和 </title> 

7. Dreamweaver 将 库 项 目 存放 在 每 个 Dreamweaver 本 地 站 点 根 文件 夹 内 的 ( ”) 文 件 夹 中 。 
A. Template B. Library C. Image D. Images 

简 答题 

83. 简 述 使 用 框架 的 优 缺 点 。 

9. 如 何在 模板 中 指定 和 删除 可 编辑 区 域 ? 

上 机 操作 题 

10. 创建 图 10-28 所 示 的 框架 页 面 ， 展 示 不 同 的 汽车 品牌 照片 。 

11. 将 站 点 的 版 权 信 息 创建 为 库 项 目 。 
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图 10-28 要 实现 的 框架 页 面 效果 


第 11 章 


发 布 Dreamweaver 本 地 站 点 


本 章 主要 介绍 站 点 发 布 的 准备 工作 , 以 及 如 何 将 Dreamweaver 本 地 站 点 上 传 到 Internet 
上 。 通 过 本 章 的 学 习 ， 应 该 完成 以 下 学 习 目 标 : 

YY 学 会 为 站 点 申请 空间 和 域名 

YY 学 会 对 站 点 进行 本 地 测试 

1 掌握 远程 站 点 的 建立 和 配置 方法 

YY 学 会 对 站 点 进行 发 布 并 进行 一 些 日 常 的 管理 


11.1 发布 前 的 准备 工作 


要 让 Internet 上 的 其 他 用 户 可 以 访问 自己 的 网 站 ， 必 须 首先 将 创建 并 调试 好 的 网 站 发 
布 到 Internet 上 。 在 发 布 站 点 之 前 ， 用 户 必 须 拥 有 保存 站 点 的 空间 ， 以 及 访问 站 点 的 域名 。 
有 了 空间 和 域名 后 ， 还 不 能 立即 将 网 站 上 传 。 为 了 保证 站 点 在 浏览 器 中 能 正常 显示 ， 还 必 
须 进行 本 地 测试 ， 包 括 站 点 的 兼容 性 测试 、 网 页 链接 是 否 正确 、 下 载 速度 测试 等 。 


11.1.1 申请 网 站 空间 和 域名 


网 站 的 空间 有 收费 和 免费 的 两 种 。 一 般 来 说 ， 个 人 站 点 可 选择 免费 的 ， 而 对 于 企业 、 
公司 等 需要 较为 稳定 运行 环境 的 站 点 则 建议 使 用 收费 的 网 站 空间 。 通 常情 况 下 ， 申 请 网 站 
空间 的 同时 会 获得 相应 的 域名 。 

在 选择 ISP(Internet Services Provider，Internet 服务 提供 商 ) 时 ， 用户 需 要 首先 了 解 一 下 
其 所 提供 的 服务 ， 例 如 是 否 收费 、 空 间 大 小 如 何 、 支 持 何 种 动态 网 页 技术 、 支 持 何 种 数据 
库 ， 以 及 服务 器 是 否 稳定 等 。 下 面 以 中 联网 为 例 ， 介 绍 如 何 申请 免费 的 网 站 空间 和 域名 。 

例 11-1 在 中 联网 申请 免费 的 网 站 空间 和 域名 。 

和 在 浏览 器 地 址 栏 中 输入 http:/www.3326.com， 按 Enter 键 打 开 中 联网 网 站 。 该 站 点 
推出 了 100MB 免费 空间 , 是 纯 静 态 的 HIML, 支持 FTP/Web 上 传 方式 , 并 赠送 二 级 域名 ， 
如 图 11-1 所 示 。 

加 单 击 “100M 免费 空间 ”链接 , 进入 图 11-2 所 示 的 服务 条 款 页 面 , 阅读 条 款 内 容 后 ， 
单 击 【 我 同意 】 按 钮 。 

各 在 用 户 信息 页 面 填写 注册 信息 ,如 图 11-3 所 示 。 完 成 后 ， 单 击 表单 底部 的 【提交 】 
按钮 。 
从 注册 成 功 后 ， 使 用 用 户 名 和 密码 登录 中 联网 ， 进 入 空间 管理 区 ， 如 图 11-4 所 示 。 
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户 需要 开通 


自己 的 网 站 空间 ， 这 样 才能 使 用 。 


图 11-2 ”阅读 服务 协议 
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11-1 中 联网 首页 
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类 ,以 及 对 主页 的 简介 信息 ,如 图 11-5 所 示 。 完 成 后 , 单 击 【 马 上 申请 
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图 11-4 空间 管理 区 图 11-5 激活 网 站 空间 
名 系统 会 恭喜 您 的 主页 开通 成 功 ， 并 给 予 个 人 网 站 的 网 址 ， 以 及 用 于 FTP 上 传 的 登 


录用 户 名 、 密 码 、FTP 地 址 ， 如 图 11-6 所 示 。 


他 在 【用 户 管理 区 】 单 击 【空间 使 用 查询 】 链 接 ， 可 查看 空间 的 使 用 情况 , 如 图 11-7 


所 示 。 


提示 : 在 中 联网 的 首页 ， 可 以 看 出 ， 该 服务 商 还 提供 各 种 收费 的 网 站 空间 服务 。 这 些 
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图 11-3 填写 注册 信息 


人 @ 单 击 【 用 户 管理 区 】 的 【免费 主页 申请 】 链 接 , 填写 网 站 名 称 ， 选 择 个 人 主页 的 分 
， 即 时 生效 】 按 钮 。 


*。 第 11 章 发 布 Dreamweaver 本 地 站 点 。 


空间 一 般 都 支持 ASP、PHP 等 动态 编程 技术 ， 以 及 提供 Access、MySQL 等 数据 库 空 间 服 
务 。 具 体 的 申请 方法 和 例 11-1 相似 ， 付 费 成 功 后 即 可 开通 。 


第 吉 三 自动 人 的 空间 出 旦 了 一 个 【本 品 网 起航 ] 的 对 认 半 页 : 
nec Me 


四 
您 可 以 根据 需要 自行 修 玖 用 用 或 保留 这 个 文 和 1 


图 11-6 系统 授权 FTP 登录 用 户 名 和 密码 图 11-7 查看 空间 使 用 情况 


11.1.2 测试 网 站 兼容 性 


由 于 访客 的 浏览 器 类 型 或 版 本 的 不 同 , 很 可 能 会 导致 正确 的 页 面 无 法 正常 显示 。 因此 ， 
在 发 布 站 点 之 前 ， 必 须 对 站 点 的 兼容 性 进行 测试 。 通 过 修正 ， 使 页 面 能 够 最 大 程度 地 在 不 
同类 型 和 版 本 上 的 浏览 器 上 正常 运行 和 显示 。 

Dreamweaver 提供 了 浏览 器 兼容 性 检查 工具 ， 通 过 它 可 以 扫描 网 页 文档 ， 并 在 【结果 】 
面板 中 报告 所 有 潜在 的 HTML+CSS 呈现 问题 。 信 任 评级 由 四 分 之 一 、 二 分 之 一 、 四 分 之 
三 或 完全 填充 的 圆 表示 (四 分 之 一 填充 表示 可 能 发 生 ， 完 全 填充 则 表示 非常 可 能 发 生 )。 另 
外 ， 该 工具 还 可 以 提供 以 下 3 个 级 别 的 潜在 浏览 器 支持 问题 的 提示 信息 : 

? 告知 性 信息 时: 表示 某 段 代码 在 特定 浏览 器 中 不 支持 ， 但 没有 可 见 的 影响 。 

? 警告 鱼 : 表示 某 段 代码 不 能 在 特定 的 浏览 器 中 显示 ， 但 不 会 导致 任何 严重 的 显示 

问题 。 

? 错误 丰 : 表示 某 段 代码 可 能 在 特定 的 浏览 器 中 导致 严重 的 、 可 见 的 问题 。 

例 11-2 练习 对 页 面 的 兼容 性 进行 测试 。 

和 @ 在 【文档 】 工 具 栏 单 击 | 居 和 检查 页 画 尽 钮 ， 在 弹出 的 菜单 中 单 击 【 设 置 】 命 令 ， 打 开 
【目标 浏览 器 〗】 对 话 框 。 在 该 对 话 框 中 选中 需要 检查 的 浏览 器 前 面 的 复 选 框 ， 在 其 右 侧 的 
下 拉 列 表 框 中 选择 浏览 器 的 最 低 版 本 ， 如 图 11-8 所 示 。 

提示 : 由 于 浏览 器 的 种 类 和 版 本 众多 ， 通 常情 况 下 ， 只 需要 保证 网 页 能 够 在 最 常用 的 
浏览 器 中 正常 显示 即 可 ， 如 Internet Explorer、Firefox 等 。 

@@ 单 击 【确定 】 按 钮 关闭 对 话 框 ， 完 成 要 测试 的 目标 浏览 器 的 设置 。 

介 在 【文档 】 窗 口中 打开 需要 测试 的 页 面 ， 在 【检测 页 面 】 下 拉 菜单 中 单 击 【 检 查 浏 
览 器 兼容 性 】 命 令 ， 即 可 在 【浏览 器 兼容 性 】 面 板 中 查看 检测 结果 ， 如 图 11-9 所 示 。 


图 11-8 设置 要 测试 的 目标 浏览 器 图 11-9 检查 结果 
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您 单 击 【 浏 览 器 兼容 性 】 面 板 左 侧 的 国 按 钮 ,可 在 浏览 器 中 显示 检查 报告 , 如 图 11-10 
所 示 。 双 击 【浏览 器 兼容 性 】〗】 面 板 中 错误 信息 列表 中 需要 修改 的 错误 信息 ， 系 统 将 在 【 拆 
分 】 视 图 中 自动 选中 不 支持 的 标记 。 将 不 支持 的 代码 修改 为 目标 浏览 器 能 够 支持 的 其 他 代 
码 或 将 其 删除 ， 以 修正 错误 ， 如 图 11-11 所 示 。 


Presteererer 到 下 委 关 让 省 愉 诅 


11-10 在 浏览 器 中 显示 检查 报告 图 11-11 修改 不 支持 的 错误 


@@ 如 果 用 户 想 保存 检查 结果 ， 可 单 击 【浏览 器 兼容 性 】 面 板 左 侧 的 团 按 钮 ， 即 可 在 
打开 的 对 话 框 中 以 指定 的 名 称 和 路 径 进行 保存 。 


11.1.3 检查 与 修复 超级 链接 


在 发 布 站 点 之 前 ， 用 户 还 需 检 查 所 有 超级 链接 是 否 正 确 ， 以 保证 访客 能 准确 到 达 目 标 
位 置 。Dreamweaver 提供 了 链接 检查 器 工具 ， 可 快速 检查 出 单个 页 面 、 站 点 某 部 分 或 整个 
站 点 中 断 开 的 链接 ， 以 及 未 被 引用 的 文件 ， 为 用 户 修改 提供 依据 。 

根据 要 检查 链接 的 范围 ， 执 行 以 下 操作 之 一 : 

? ”打开 需要 检查 的 网 页 文档 ， 选 择 【 文 件 】| 【检查 页 】| 【和 链接】 命令 ; 

? ”在 【文件 】 面板 的 本 地 站 点 下 , 用 鼠标 右 击 要 检查 的 文件 或 文件 夹 ， 从 弹出 的 快捷 

菜单 中 单 击 【 检 查 链接 】|【 选 择 文件 /文件 夹 】 命 令 ; 

? 在 【文件 】 面 板 中 用 鼠标 右 击 本 地 站 点 ， 从 弹出 菜单 中 单 击 【检查 链接 】|【 整 个 

本 地 站 点 】 命 令 。 

检查 结果 显示 在 【链接 检查 器 】 面 板 的 列表 框 中 。 利 用 【显示 】 下 拉 列 表 框 可 选择 查 
看 的 链接 方式 。【 断 掉 的 链接 】 用 于 检查 文档 中 是 否 存在 断 开 的 链接 : 【外 部 链接 】 用 于 
检查 外 部 链接 : 【孤立 文件 】 用 于 检查 站 点 中 是 否 存在 孤立 文件 。 默 认 显示 的 是 断 掉 的 链 
接 ， 如 图 11-12 所 示 。 
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11-12 查看 检查 的 结果 
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要 对 链接 进行 修复 ， 可 在 列表 中 单 击 要 修改 的 选项 ， 使 其 呈 改 写 状态 ， 如 图 11-13 所 
示 ， 然 后 重新 设置 链接 路 径 即 可 。 如 果 多 个 文件 都 有 相同 的 中 断 链 接 ， 那 么 当 用 户 对 其 中 
一 个 进行 修复 后 ， 系 统 会 打开 图 11-14 所 示 的 提示 对 话 框 ， 询 问 是 否 修复 剩 下 的 引用 该 文 


件 的 链接 。 单 击 【是 】 按 钮 ，Dreamweaver 将 自动 它们 重新 指定 链接 路 径 。 
Ra 加 
文件 疡 掉 的 谤 接 
/Tonpstes/ 诗 台所 昌 . rt ea/ 12 jpg 区] 经 是 天 委 店 正 条 下 的 引用 这 之 全 的 二 法 难 按 了 
A de 
pm ee | EDD CE Cw 
图 11-13 ”修复 断 掉 的 链接 图 11-14 询问 是 否 更 新 其 他 具 
有 相同 错误 的 链接 


11.1.4 测试 下 载 速度 


网 页 的 下 载 速度 是 衡量 该 网 页 制作 水 平 的 一 个 重要 标准 ， 等 待 一 个 页 面 载 入 的 时 间 最 
好 不 要 超过 2 分 钟 ， 否 则 访客 将 难以 忍受 。 在 Dreamweaver【 文 档 】 窗 口 的 右 下 角 ， 用 户 
可 以 查看 当前 网 页 文档 的 大 小 和 下 载 所 需 的 时 间 ， 如 图 11-15 所 示 。 

oo% vjT0l x 247v 1K/1 秒 


11-15 ”查看 网 页 大 小 和 下 载 时 间 


图 11-15 中 显示 的 下 载 时 间 默 认 是 基于 56Kbps 网 速 的 , 如 果 想 查看 网 页 在 其 他 连接 速 
度 下 的 下 载 时 间 ， 可 以 选择 【编辑 】| 【首选 参 数 】 命 令 , 打开 【首选 参数 】 对 话 框 。 在 【分 
类 】 列 表 框 中 单 击 【 状 态 栏 】 选 项 ， 在 【连接 速度 】 下 拉 列 表 框 中 可 以 选择 下 载 该 网 页 时 
的 连接 速度 ， 如 图 11-16 所 示 。 用 户 还 可 以 从 【窗口 大 小 】 列 表 框 中 选择 默认 浏览 器 的 分 
辨 率 大 小 。 
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图 11-16 重新 设置 用 于 测试 下 载 时 间 的 网 络 连 接 速度 
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11.2 ”建立 远程 站 点 并 发 布 网 站 


Dreamweaver 提供 了 链接 到 远程 站 点 上 的 多 种 方式 : 

? FTP 一 一 连接 到 主 Web 站 点 的 标准 方法 。 

? ”本 地 /网 络 一 一 当 使 用 中 间 Web 服务 器 时 ， 就 会 频繁 地 使 用 本 地 或 网 络 连接 。 然 后 ， 
来 自 中 间 Web 服务 器 的 文件 被 发 布 到 与 之 相连 的 Internet 上 。 

? ”WebDav 一 一 基于 Web 的 分 布 式 创作 ,但 要 求 所 有 设计 者 都 必须 使 用 WebDav 系统 。 

? RDS 一 一 由 Adobe 针对 ColdFusion 开发 的 远程 开发 服务 (Remote Development 
Services)， 主 要 在 基于 ColdFusion 的 站 点 中 使 用 。 

? SourceSafe 数据 库 一 一 Microsoft 开发 的 以 存 回 /取出 管理 和 反 转 能 力 为 特征 的 远程 
站 点 建立 方式 。 


11.2.1 建立 一 个 远程 FTP 站 点 


大 多 数 网 页 设计 人 员 都 选择 通过 FTP 来 发 布 和 维护 自己 的 网 站 , 但 这 要 求 申请 的 网 站 
空间 必须 支持 FTP 上传， 还 必须 有 空间 服务 商 提供 的 FTP 地 址 、 登 录用 户 名 和 密码 。 

例 11-3 使 用 FTP 远程 服务 器 建立 远程 站 点 。 

各 启动 Dreamweaver CS4， 选 择 【 站 点 】|【 管 理 站 点 】 命 令 ， 打开 【 管 理 站 点 】 对 
话 框 。 

加 选择 第 9 章 创 建 的 “ 花 蝶 古 ”站 点 ， 单 击 【 编 辑 】 按 钮 。 

各 在 打开 的 【站 点 定义 为 】 对 话 框 中 ,切换 到 【高 级 】 选 项 卡 ， 然 后 单 击 【 分 类 】 列 
表 框 中 的 【远程 信息 】 选 项 。 

人 @ 在 【访问 】 下 拉 选 项 中 选择 【FTP】。 分 别 在 【FTP 主机 】、【 登 录 】 和 【密码 】 
文本 框 中 输入 申请 到 的 网 站 空间 的 FTP 主机 地 址 ， 空 间 服 务 商 提供 的 FTP 用 户 名 和 密码 ， 
如 图 11-17 所 示 。 
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图 11-17 配置 远程 FTP 站 点 信息 
提示 : 如 果 不 能 确定 您 的 FTP 主机 地 址 ， 请 向 您 的 空间 服务 商 进行 咨询 。 


hsz 


* 第 11 章 发 布 Dreamweaver 本 地 站 点 。 


加 有 必要 的 话 ， 可 在 【主机 目录 】 文 本 框 中 输入 Web 主机 上 存储 公共 可 见 文档 的 文 
件 夹 名 称 。 

提示 : 一 些 Web 主机 使 用 一 个 根 文件 夹 来 提供 FTP 访问 ， 该 根 文 件 夹 可 能 包含 非 公 
共 可 用 的 文件 夹 和 公共 可 用 的 文件 夹 。 在 这 种 情况 下 ， 在 【主机 目录 】 文 本 框 中 输入 文件 
夹 名 称 ， 如 www、wwwroot 等 。 而 对 于 其 他 Web 主机 而 言 ， 由 于 FTP 地 址 和 公共 的 文件 
夹 地 址 相同 ， 所 以 【主机 目录 】 文 本 框 保留 空白 即 可 。 

© 为 了 避免 Dreamweaver 每 次 连接 远程 站 点 时 都 要 求 输入 FTP 用 户 名 和 密码 ， 可 选 
中 【保存 】 复 选 框 。 

7) 单 击 【 测 试 】 按 钮 ， 如 果 连 接 成 功 ，Dreamweaver 会 提示 信息 ， 如 图 11-18 所 示 。 


[CD 去 


二 reamWeavtr 已 成 也 演 琴 3 Web 王 务 里 。 
图 11-18 ”Dreamweaver 提示 连接 成 功 


注意 : 如 果 用 户 输 入 的 FTP 信息 完全 正确 而 无 法 成 功 连接 ， 可 单 击 【 服 务 器 兼容 性 】 
按钮 ， 在 打开 的 对 话 框 中 禁用 【使 用 FTP 性 能 优化 】〗】 复 选 框 ， 如 图 11-19 所 示 。 然 后 重新 
测试 连接 。 

人 @ 选中 您 的 FIP 服务 器 要 求 的 选项 前 面 的 复 选 框 。 

? 【使 用 Passive FTP】〗: 允许 用 户 的 计算 机 建立 一 个 连接 到 主机 上 的 必要 连接 ， 并 
绕 过 防火 墙 限制 ， 该 选项 经 常 与 【使 用 防火 墙 】 选 项 协同 使 用 。 

? 【使 用 IPv6 传输 模式 】: 如 果 用 户 的 Web 服务 器 主机 是 IPv6 服务 器 ， 选 中 该 选 
项 将 基于 最 新 的 IPv6 传输 协议 。 

? 【使 用 防火 墙 】: 允许 您 的 计算 机 从 防火 墙 后 面 连接 到 主机 。 一 旦 启用 该 选项 , 可 
单 击 【 防 火 墙 设置 】 按 钮 ， 在 打开 的 对 话 框 中 定义 您 的 防火 墙 参数 ， 如 端口 、 防 火 
墙 主 机 等 ， 如 图 11-20 所 示 。 

? 【使 用 安全 FTP】〗: 启用 到 使 用 SFTP 的 主机 的 连接 。 
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人 @ 选中 【维护 同步 信息 】 复 选 框 ，Dreamweaver 会 自动 标注 本 地 和 远程 站 点 上 已 经 被 
改变 的 文件 ， 这 样 就 比较 容易 保持 它们 同步 。 选 中 【保存 时 自动 将 文件 上 传 到 服务 器 】 复 
选 框 ， 在 保存 对 本 地 站 点 的 修改 时 ，Dreamweaver 会 自动 将 文件 从 本 地 站 点 传输 到 远程 站 
点 。 当 用 户 通过 与 其 他 团队 成 员 共 同 建站 时 ， 可 选中 【启用 存 回 和 取出 】 复 选 框 以 打开 存 
回 和 取出 系统 ， 此 时 需要 输入 一 个 用 户 名 和 Email 地 址 。 如 果 用 户 是 独自 建站 ， 则 不 必 启 
该 系统 。 

侈 单 击 【 确 定 】 按 钮 ， 关 闭 【 站 点 定义 】 对 话 框 。 在 【管理 站 点 】 对 话 框 中 单 击 【 完 
成 】 按 钮 ， 完 成 远程 FTP 站 点 的 配置 。 


11.2.2 在 本 地 /网 络 服务 器 上 建立 远程 站 点 


如 果 用 户 希 望 使 用 本 地 计算 机 作为 Web 服务 器 ， 则 可 以 将 远程 站 点 建立 在 本 地 。 但 使 
用 本 地 /网 络 服 务 器 之 前 ， 用 户 需 要 在 计算 机 上 安装 并 启用 IIS 服务 。 

IIS 是 由 Microsoft 开发 的 以 Windows 为 平台 的 Web 服务 器 软件 。 要 检查 自己 的 系统 
是 否 配 置 了 IIS 服务 ， 可 查找 C:/Inetpub 文件 夹 是 否 存 在 。 如 果 不 存在 ， 则 需要 及 时 安装 。 

例 11-4 安装 并 配置 IIS 服务 。 

@ 在 【开始 】 菜单 中 单 击 【控制 面板 】 选 项 ， 在 打开 的 控制 面板 中 单 击 【 安 装 / 印 载 
程序 】 选 项 ， 进 入 【程序 和 功能 】 窗 口 。 

加 单 击 【打开 或 关闭 Windows 功能 】 链 接 , 打开 【Windows 功能 】 窗 口 , 选中 【Interet 
信息 服务 】 前 面 的 复 选 框 ， 如 图 11-21 所 示 。 单 击 【 确 定 】 按 钮 ，Windows Vista 开始 自动 
安装 IIS 服务 。 
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11-21 安装 IIS 服务 


人 @ Is 安装 完成 后 ,需要 对 其 进行 测试 ， 以 确保 其 正确 安装 。 打 开 浏 览 器 ， 在 地 址 栏 
中 输入 http://localhost 并 按 Enter 键 ， 如 果 安 装 无 误 ， 则 会 同时 打开 图 11-22 所 示 的 窗口 。 
提示 : IIS 本 身 提供 FTP、 电 子 邮 件 、 网 页 浏览 等 服务 。 当 利用 IIS 创建 网 站 时 ， 所 
有 网 页 都 必须 存放 在 “网 站 ”这 个 虚拟 的 目录 中 。IIS 会 根据 指定 的 网 址 对 应 路 径 ， 将 其 
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中 的 子 文 件 和 子 目 录 对 应 到 计算 机 上 存储 网 页 文档 的 真正 位 置 。 
从 打开 【开始 】 莱 单 , 在 搜索 框 中 输入 “IISs 信息 服务 ”并 按 Enter 键 , 即 可 打开 【Internet 
信息 服务 管理 器 】 窗 口 ， 如 图 11-23 所 示 。 


”图 11-22 测试 TS 是 否 安装 成 功 图 11-23 【Intemet 信息 服务 管理 器 】 窗口 


加 下 面 来 建立 本 地 Web 服务 器 。 例 如 本 机 的 IP 地 址 是 192.168.1.101， 网 站 放置 在 
“CNUsers\WJL\Documents\ 花 蝶 古 ”目录 下 ， 首 页 为 index.htm。 在 【Internet 信息 服务 管 
理 器 】 窗 口 左 侧 展开 树 , 右 击 【Default Web Site】( 默 认 网 站 ) 节 点 ， 从 弹出 菜单 中 选择 【 重 
命名 】 命 令 ， 将 站 点 重 命名 为 “ 花 蝶 古 ”。 

人 @ 右 击 “ 花 蝶 古 ”节点 ， 从 弹出 菜单 中 选择 【编辑 绑 定 】 命 令 ， 打 开 【 网 站 绑 定 】 对 
话 框 。 在 列表 中 选中 列 出 的 选项 ， 单 击 【 编 辑 】 按 钮 ， 打 开 【 编 辑 网 站 绑 定 】 对 话 框 。 从 
【IP 地 址 】 下 拉 列 表 框 中 选择 本 地 计算 机 的 IP 地 址 。 用 户 还 可 以 设置 主机 名 ， 如 
www.butterfly.com， 如 图 11-24 所 示 。 关 闭 所 有 对 话 框 。 
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11-24 ”编辑 网 站 绑 定 信息 


注意 : 如 果 用 户 没有 申请 到 网 站 域名 ， 请 保持 默认 设置 ， 跳 过 步骤 @。 

六 下 面 来 设置 站 点 的 物理 路 径 和 虚拟 路 径 。 单 击 “ 花 蝶 古 ”节点 ， 在 右 侧 【操作 】 下 
单 击 【 基 本 设置 】 命 令 ， 打 开 【 编 辑 站 点 】 对 话 框 。 在 【物理 路 径 】 文 本 框 中 设置 本 地 站 
点 所 在 的 路 径 ， 如 图 11-25 所 示 。 单 击 【确定 】 按 钮 ， 关 闭 该 对 话 框 。 

@@ 右 击 “ 花 蝶 古 ” 节 点 ， 从 弹出 菜单 中 选择 【添加 虚拟 目录 】 命 令 ， 在 弹出 的 对 话 杠 
中 设置 虚拟 目录 的 路 径 和 别名 ， 如 图 11-26 所 示 。 
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图 11-25 设置 站 点 的 物理 目录 
人 @ 在 中 间 区 域 的 【功能 视图 】 下 ， 双 击 【 默 认 文档 】 图 标 , 将 网 站 的 默认 首页 设置 为 
index.htm， 如 图 11-27 所 示 。 用 户 也 可 以 单 击 【 添 加 】 按 钮 ,设置 诸如 index.aspx 等 形式 。 


11-27 设置 网 站 的 首页 形式 


和 大 关闭 【Is 信息 服务 管理 器 】 窗 口 。 

下 面 在 Dreamweaver 中 对 远程 站 点 进行 设置 。 启 动 Dreamweaver CS4， 选 择 【 站 点 】| 
【管理 站 点 】 命 令 ， 打 开 【 管 理 站 点 】 对 话 框 。 对 “ 花 蝶 古 ”站 点 进行 编辑 ， 在 【站 点 定 
义 】 对 话 框 的 【远程 信息 】 分 类 下 ， 将 【访问 】 方 式 设置 为 【本 地 /网 络 】， 将 【 远 端 文件 


11-28 在 Dreamweaver 中 配置 本 地 /网 络 服务 器 
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11.2.3 发布 本 地 站 点 


配置 好 远程 信息 后 ， 就 可 以 将 站 点 发 布 到 Internet 上 供 他 人 浏览 了 。 

例 11-5 发布 Dreamweaver 本 地 站 点 。 a 

入 在 【文件 】 面 板 中 选择 “ 花 蝶 古 ” 站 点 ， 单 击 【 上 传 文件 】 按 钮 金 |。Dreamweaver 
会 提示 是 否 上 传 整个 站 点 ， 单 击 【 确 定 】〗】 按 钮 进行 上 传 。 

加 Dreamweaver 会 会 自动 连接 到 远程 的 FTP 服务 器 或 本 地 服务 器 上 ， 将 站 点 上 传 到 设 
置 的 远程 文件 夹 中 。 将 视图 模式 切换 到 远程 视图 ， 可 以 查看 已 经 上 传 的 文件 。 图 11-29 分 
别 显 示 了 FTP 远程 服务 器 和 本 地 服务 器 两 种 情况 下 的 远程 文件 夹 。 
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图 11-29 分 别 在 本 地 服务 器 ( 左 图 ) 和 FTP 服务 器 ( 右 图 ) 上 查看 上 传 的 文件 


加 下 面 来 预览 发 布 的 站 点 ,分别 在 浏览 器 中 浏览 http://192.168.1.101/butterfly 和 
http://choice103.g03.i icpen.com 汪 交 站 二 效果 如 图 11-30 所 示 。 


[Ta EEC 一 EC 3 
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图 11-30 分别 在 本 地 站 点 和 FTP 服务 器 上 预览 页 面 效果 
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提示 : 192.168.1.101 是 创建 网 站 的 本 地 计算 机 的 IP 地 址 ，butterfly 是 设置 的 虚拟 目 
录 的 别名 。 


11.3 ”网 站 的 维护 和 宣传 


网 站 成 功 上 传 后 ， 需 要 时 常 对 内 容 进行 更 新 ， 这 样 才能 保持 网 站 的 生命 力 。 此 外 ， 用 
户 还 可 以 采用 一 些 方法 ， 对 自己 的 网 站 进行 宣传 ， 扩 大 影响 力 ， 提 高 点 击 率 。 


11.3.1 维护 站 点 内 容 


对 于 上 传 到 远程 站 点 上 的 文件 ， 用 户 可 以 将 其 下 载 到 本 地 站 点 中 进行 编辑 ， 只 需 在 远 
程 视 图 中 选中 要 修改 的 网 页 文档 ， 单 击 【 获 取 】 按 钮 [ 电 即 可 。 然 后 在 本 地 对 该 网 页 文档 
进行 编辑 ， 完 成 后 再 将 其 单独 上 传 到 远程 站 点 即 可 。 
由 于 在 本 地 站 点 和 远程 站 点 都 可 以 对 网 页 进行 编辑 ， 因 此 可 能 出 现 相同 文件 不 同 版 本 
的 情况 ， 而 且 很 容易 把 新 旧 文 件 搞 混 淆 。 为 了 保持 本 地 站 点 和 远程 站 点 中 文件 的 一 致 ， 可 
以 使 用 Dreamweaver 的 同步 功能 。 在 【文件 】 面 板 中 单 击 按钮 | 加 |， 在 展开 的 窗口 中 选择 
【站 点 】| 【同步 】 命 令 ， 打 开 【 同 步 文件 】 对 话 框 ， 如 图 11-31 左 图 所 示 。 
在 【同步 】 下 拉 列 表 框 中 选择 要 同步 整个 站 点 还 是 仅仅 同步 选 定 的 文件 ， 单 击 【 预 览 】 
按钮 ，Dreamweaver 即 开始 同步 操作 ， 如 图 11-31 右 图 所 示 。 
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11-31 同步 本 地 和 远程 站 点 


当 网 站 规模 较 小 时 ， 一 个 人 进行 维护 基本 上 就 可 以 了 。 但 当 网 站 发 展 到 一 定 规模 ， 站 
点 的 维护 将 变 得 困难 起 来 ， 此 时 ， 就 需要 多 人 协作 对 网 站 进行 维护 。 为 了 确保 一 个 文件 在 
同一 时 刻 只 有 一 个 人 在 进行 编辑 和 修改 , 必须 借助 Dreamweaver 的 存 回 /取出 系统 。 用 户 可 
在 配置 远程 站 点 信息 时 ， 启 用 存 回 和 取出 功能 ， 并 设置 用 于 取出 文件 时 进行 标记 的 用 户 名 
以 及 自己 的 邮件 地 址 。 

“取出 ”文件 是 指 文件 的 权限 归属 用 户 自 己 所 有 ， 用 户 可 以 对 它 进行 编辑 和 修改 ， 该 
文件 对 其 他 维护 者 是 只 读 的 。 当 文件 被 标识 为 取出 时 ，Dreamweaver 将 在 站 点 窗口 中 该 文 
件 图 标 后 设置 一 个 标记 。 如 果 标记 显示 为 绿色 ， 表 示 文 件 被 用 户 取 出 ; 如 果 标记 为 红色 ， 
表示 文件 被 他 人 取出 ， 取 出 文件 的 用 户 名 将 显示 在 站 点 窗口 中 。 

“ 存 回 ”文件 是 指 文件 可 被 其 他 网 页 维护 者 取出 和 编辑 。 此 时 本 地 版 本 将 成 为 只 读 文 
件 ， 以 避免 他 人 在 取出 文件 时 本 人 去 修改 它们 。 

在 Dreamweaver 中 ， 站 点 文件 的 存 回 /取出 信息 是 通过 一 个 带 有 .lck 扩展 名 的 纯 文 本 文 
件 来 记录 的 。 当 用 户 在 站 点 窗口 中 对 文件 进行 存 回 或 取出 操作 时 ，Dreamweaver 将 分 别 在 
本 地 和 远程 站 点 上 创建 一 个 .lck 文件 ,每 个 .lck 文件 都 与 取出 的 文件 同名 。.lck 文件 不 能 显 
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示 在 站 点 窗口 中 ， 但 用 户 可 以 使 用 其 他 的 FTP 软件 来 查看 位 于 服务 器 上 的 相应 目录 。 

于 一 个 文件 而 言 ， 一 旦 被 取出 后 ， 该 文件 对 于 其 他 维护 人 员 来 说 就 是 只 读 的 。 但 这 
种 现象 是 由 Dreamweaver 所 提供 的 ， 在 实际 的 服务 器 或 局 域 网 中 ,这些 文件 并 不 具有 只 读 
限制 。 也 就 是 说 ， 如 果 通 过 其 他 的 应 用 程序 访问 远程 站 点 或 本 地 站 点 中 的 目录 ， 就 可 以 修 
改 或 覆盖 这 些 被 取出 的 文件 。 当 然 ， 这 时 也 会 看 到 相应 的 .lck 文件 。 因 此 ， 可 以 根据 .lck 
文件 的 名 称 来 避免 修改 一 些 被 取出 的 文件 。 


11.3.2 ”宣传 站 点 


Internet 上 的 网 站 何止 千 万 ,如 何 使 浏览 者 快速 找到 自己 的 网 站 、 提 高 网 站 的 访问 流量 、 
提高 知名 度 ， 是 网 站 宣传 所 要 解决 的 问题 。 用 户 可 通过 设置 网 页 标题 、 添 加 meta 标签 、 设 
置 关键 字 等 方法 来 提高 被 浏览 者 搜索 到 的 几率 和 网 站 的 吸引 力 。 然 后 通过 注册 搜索 引擎 、 
友情 链接 、 网 站 广告 、BBS 论坛 、 电 子 邮 件 等 方式 对 网 站 进行 推广 。 

1. 设置 网 页 标题 

网 页 标题 即 标签 <title> 和 </title> 之 间 的 内 容 。 在 设置 页 面 标题 时 ， 要 尽量 与 当前 页 面 
的 内 容 相 一 致 。 标 题 要 简练 ， 要 说 明 页 面 、 网 站 最 重要 的 内 容 是 什么 。 网 页 标题 出 现在 搜 
索 结 果 列 表 的 链接 上 ， 因 此 可 以 带 有 一 定 的 煽动 性 ， 以 吸引 浏览 者 点 击 。 

2. 添加 meta 标签 

除了 网 页 标题 ， 很 多 搜索 引擎 都 会 搜索 到 <meta> 标 签 。 这 是 一 句 说 明 性 文字 ， 描述 页 
面 正文 的 内 容 ， 句 中 可 包含 页 面 中 使 用 到 的 关键 字 、 [Eee 
词组 等 ,形式 是 <meta name="description" content=" 描 述 on 当 0 
信息 ">， 位 置 位 于 标签 <head> 和 </head> 之 间 。 :as ， 如 

要 向 页 面 中 添加 meta 标签 ， 可 选择 【插入 】|【 标 | | 、 和 二 
签 】 命 令 ， 打 开 【 标 签 选择 器 】 对 话 框 。 在 左 侧 树 中 
展开 【HTML 标签 】 节 点 ， 单 击 下面 的 【页 面 构成 】 
节点 ， 在 右 侧 的 列表 中 双击 meta 标签 。 在 【名 称 】 下 
拉 列 表 框 中 选择 【描述 】 选 项 ， 在 【内 容 】 文 本 框 中 一 一 一 rm 
输入 描述 内 容 ， 单 击 【确定 】 按 钮 即 可 完成 设置 ， 如 图 11.32 为 网 页 添加 meta 标签 
图 11-32 所 示 。 

3. 添加 关键 字 

网 页 关键 字 的 选择 要 准确 无 误 ， 并 首先 在 网 页 标题 中 出 现 ， 正 文中 也 尽量 要 有 这 些 关 
键 字 。 在 Dreamweaver 中 为 网 页 添加 关键 字 的 方法 ， 与 添加 描述 性 meta 标签 的 方法 基本 
相同 ， 只 是 在 【名 称 】 下 拉 列 表 框 中 应 选择 【关键 字 】 选 项 ， 然 后 在 【内 容 】 文 本 框 中 输 
入 相应 的 关键 字 即 可 ， 各 关键 字 之 间 用 逗号 进行 分 隔 。 

4. 注册 搜索 引擎 

搜索 引擎 的 作用 是 使 浏览 者 在 浩瀚 的 Internet 上 迅速 获取 自己 所 需 信息 , 据 CNNIC 架 
(China Internet Network Information Center， 中 国 互 联网 络 信息 中 心 ) 调 查 , 浏览 者 获知 新 网 
站 有 76% 左 右 是 通过 搜索 引擎 。 因 而 ， 对 于 每 一 个 新 成 立 的 网 站 ， 注 册 搜 索引 擎 是 其 扩大 
网 站 宣传 的 首要 选择 。 
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下 面 我 们 首先 来 了 解 一 下 搜索 引擎 的 工作 原理 。 Internet 上 的 网 站 通过 页 面 之 间 的 链接 
建立 起 彼此 之 间 的 联系 ， 而 搜索 引擎 正 是 凭借 这 种 链接 在 网 上 进行 搜索 。 当 搜索 到 一 个 新 
的 页 面 时 ， 就 将 其 关键 字 放 入 数据 库 中 。 浏 览 者 在 搜索 引擎 输入 查询 信息 的 关键 字 ， 搜 索 
引擎 系统 基于 这 些 关键 字 ， 通 过 计算 机 程序 自动 搜索 互联 网 上 的 信息 ， 并 将 这 些 信息 的 网 
址 按照 一 定 的 规则 反馈 给 信息 查询 者 。 

随 着 Internet 上 信息 的 快速 增长 , 目前 大 多 数 搜索 引擎 通过 Robots( 机 器 人 ) 等 程序 具备 
了 自动 搜索 功能 ， 即 将 每 一 页 代表 超级 链接 的 词汇 放 入 一 个 数据 库 中 ， 供 查询 者 使 用 。 目 
前 比较 有 名 的 搜索 引擎 有 Google、 百 度 、 雅 虎 等 。 

要 正确 理解 搜索 引擎 的 工作 原理 ， 就 必须 正确 区 分 搜索 引擎 与 目录 查询 。 目 录 查 询 是 
由 专门 人 员 将 收集 到 的 各 种 网 站 按 内 容 进 行 分 类 ， 组 织 成 一 级 一 级 的 分 类 目录 ， 浏 览 者 要 
获取 信息 , 就 需要 按照 信息 的 内 容 和 特点 一 级 一 级 进入 到 目录 系统 中 , 当 提 交 查 询 请 求 后 ， 
系统 只 在 该 目录 系统 中 搜索 相关 网 站 。 这 种 通过 人 工 登 记 注册 网 站 的 方式 ， 优 点 是 目录 清 
晰 、 内 容 较 少 ， 被 搜索 到 的 机 会 较 大 ， 但 缺陷 是 成 本 太 高 且 不 易 更 新 。 而 搜索 引擎 则 是 通 
过 自动 方式 进行 注册 ， 且 系统 查询 的 范围 是 整个 互联 网 ， 更 新 速度 快 。 

一 般 而 言 ， 注 册 网 站 时 只 需 注册 网 站 的 首页 即 可 。 但 很 多 情况 下 ， 站 点 首页 仅仅 是 站 
点 图 标 或 几 行 介绍 ， 关 键 信息 都 在 链接 的 其 他 页 面 上 上。 此外， 大 多 数 搜索 引擎 在 一 定时 间 
内 只 接收 同一 域名 下 数量 有 限 的 页 面 。 因 而 ,注册 页 面 时 ， 最 好 采用 将 网 站 关键 页 面 排序 ， 
然后 逐个 注册 的 方式 。 

例 11-6 在 Google 搜索 引擎 注册 “ 花 蝶 古 ”网 站 。 

入 打开 浏览 器 ， 在 地 址 栏 输入 http:/www.google.com/intl/zh-CN/add_url.html 并 按 
Enter 键 ， 进 入 Google 网 站 登录 页 面 ， 如 图 11-33 所 示 。 


Google 

6 且 录 /更 新 网 站 有 RE 

zt 大 wa | Ht 

Here 分 员 辐 。。 时针 Hi 人 和风 让 
Pn Fy te 

trac A Tj 各 候 区 区 坦 坊 的 广 

BY J sy 

旺 录 / 制 达 网 沁 


县 Caagie 日 录 中 删除 网 页 记录 


图 11-33 ”Google 搜索 引擎 免费 注册 页 面 
加 在 【网 址 ] 文本 框 中 输入 要 注册 网 站 的 地 址 ， 并 在 【说 明 】 文 本 框 中 输入 相关 的 描 
述 信息 ， 单 击 【登录 】 按 钮 。 
人 Google 会 提示 已 经 成 功 加 载 注册 的 网 址 ， 如 图 11-34 所 示 。 但 Google 对 于 何 时 或 
是 否 显示 这 些 网 址 ， 不 能 作出 任何 预测 或 保证 。 
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用 户 可 在 不 同 的 搜索 引擎 上 分 别 进行 注册 ,也 可 以 使 用 专门 的 登录 软件 (如 登录 骑兵 )， 
一 次 性 完成 所 有 注册 。 另 外 ， 如 果 条 件 人 允许， 用 户 可 以 使 用 付费 注册 ， 这 样 可 以 获得 更 好 
的 网 站 排名 。 

位 什么 是 SEO? 

人 S SEo 即 搜索 引擎 优化 (Search Engine Optimization)。 世 界 上 每 一 个 搜索 引擎 都 喜欢 把 高 质量 


的 网 站 排 在 前 面 。 一 个 内 容 质量 好 、 用 户 体 验 度 高 ， 网 站 结构 、 页 面 设计 、 标 签注 释 等 各 方面 
细节 都 设计 合理 的 网 站 , 通常 会 获得 非常 好 的 网 站 排名 。SEO 要 做 的 就 是 优化 和 完善 网 站 , 把 
网 站 打造 得 更 好 ， 使 它 获得 更 好 的 排名 和 点 击 率 。 


5. 友情 链接 
也 称 为 交换 链接 ， 主 要 是 与 自己 站 点 内 容 相 近 、 访 问 量 相 当 的 站 点 建立 相互 间 的 友情 
链接 ， 或 是 在 各 自 站 点 上 放置 对 方 的 Logo 或 网 站 名 称 ， 以 扩大 站 点 影响 力 。 相 对 于 搜索 
引擎 ， 网 站 之 间 的 友情 链接 能 更 有 效 地 吸引 访问 者 。 
用 户 也 可 以 通过 专门 的 站 点 来 交换 动态 链接 ， 比 如 网 盟 、 太 极 网 等 。 可 以 选择 图 形 或 
文字 的 方式 ， 任 何 成 员 网 站 的 链接 将 出 现在 你 的 网 站 上 。 而 您 的 网 站 也 将 按照 访问 量 成 比 
例 地 显示 在 成 员 的 网 站 上 ， 其 最 大 优点 是 彼此 之 间 公 平 。 
6. 投放 广告 
对 于 一 些 商业 型 网 站 ， 花 费 一 定数 量 的 金钱 在 门户 网 站 或 其 他 知名 网 站 上 发 布 广告 是 
十 分 必要 的 。 付 费 方式 大 致 有 两 种 : cpm 和 cpc。cpm 方式 是 按照 广告 在 他 人 网 站 上 每 显 
示 一 千 次 的 价格 计 费 ;，cpe 方式 是 按照 广告 在 他 人 网 站 上 每 被 单 击 访问 一 次 的 价格 计 费 。 
常见 的 网 站 广告 类 型 有 : 按键 广告 、 弹 出 广告 、 旗 帜 广告 等 。 
7. 在 BBS 论坛 发 帖 宣 传 
这 种 方法 虽然 花费 精力 ， 但 是 效果 非常 好 。 要 选择 自己 潜在 的 访问 人 群 可 能 经 常 访问 
的 BBS, 或 者 人 气 比较 好 的 BBS， 发 帖 时 应 注意 以 下 几 点 : 
? 不 要 直接 发 广告 ， 这 样 的 帖子 很 容易 被 当 作 广 告 帖 删除 ; 
? 用 好 的 头像 和 签名 ， 头 像 可 以 专门 设计 一 个 , 宣传 自己 的 站 点 ， 签 名 可 以 加 入 自己 
网 站 的 介绍 和 链接 ; 

? 发 帖 要 注重 质量 ， 因 为 发 帖 多 、 质 量 不 好 ， 很 快 就 会 沉 底 ， 总 浏览 量 便 不 会 大 。 发 
帖 的 关键 是 为 了 让 更 多 的 人 看 ， 变 相 地 宣传 自己 的 网 站 ， 所 以 发 质量 高 的 帖子 ， 可 
以 花费 较 小 的 精力 ， 获 得 较 好 的 效果 。 

8. QQ 群发 

QQ 的 在 线 人 数 为 数 百 万 ， 如 果 广 告 内 容 设 计 好 ， 标 题 新 颖 ， 采 用 QQ 方式 进行 群发 ， 
也 可 以 带 来 很 好 的 宣传 效果 。 此 外 ， 还 可 以 采用 电子 邮件 群发 方式 来 宣传 站 点 ， 但 需要 的 
注意 的 是 不 要 复发 ， 否 则 会 被 误 认为 垃圾 邮件 或 信息 ， 被 拒绝 访问 。 

宣传 对 于 网 站 而 言 是 非常 重要 的 ， 但 是 网 站 设计 人 员 应 该 懂得 一 个 站 点 的 真正 生命 在 
于 内 容 本 身 。 所 以 ， 如 果 本 身 内 容 枯燥 、 和 乏味， 再 怎么 宣传 也 是 无 济 于 事 的 。 因 而 ， 要 不 
断 地 对 网 站 内 容 进行 更 新 、 改 善 界面 ， 使 其 更 为 友好 。 此 外 ， 树 立 网 站 的 信誉 也 是 非常 重 
要 的 ， 不 能 够 欺骗 浏览 者 ， 网 站 也 需要 “回头 客 ”。 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 
本 章 小 结 


网 站 制作 好 后 ,要 让 全 球 Internet 用 户 能 访问 到 自己 的 网 站 ,就 必须 将 其 发 布 到 Internet 
上 。 在 发 布 之 前 ， 用 户 需要 申请 主页 空间 和 域名 ， 进 行 站 点 的 本 地 测试 和 优化 ， 然 后 才能 
进行 发 布 。 发 布 完成 后 还 要 进行 网 站 的 宣传 、 维 护 等 ， 以 保证 网 站 具有 持续 的 生命 力 。 本 
章 对 相关 的 各 个 环节 进行 了 详细 介绍 ， 尤 其 是 强调 了 远程 站 点 的 配置 这 一 难点 。 下 一 章 将 
向 读者 介绍 Dreamweaver 中 的 Ajax 技术 一 一 Spry 框架 。 


习 题 


填空 题 
1. 在 发 布 站 点 之 前 ， 用 户 必须 拥有 保存 站 点 的 ， 以 及 访问 站 点 的 
2. 由 于 访客 的 浏览 器 类 型 或 版 本 的 不 同 , 很 可 能 导致 正确 的 页 面 无 法 正常 显示 。 因 此 , 在 发 布 站 点 之 前 ， 
必须 对 站 点 的 进行 测试 。 
3. 当 多 人 对 网 站 进行 维护 时 ， 可 利用 Dreamweaver 的 系统 ， 避 免 不 同 用 户 在 同一 时 刻 对 同一 网 
页 文档 进行 修改 。 
4. 是 一 句 说 明 性 文字 ， 描 述 页 面 正文 的 内 容 ， 名 中 可 包含 页 面 中 使 用 到 的 关键 字 、 词 组 等 。 
5. 对 于 每 一 个 新 成 立 的 网 站 ， 是 其 扩大 网 站 宣传 的 首要 选择 。 
选择 题 
6. 如 果 用 户 希 望 使 用 本 地 计算 机 作为 Web 服务 器 ， 可 使 用 (”) 方 式 来 建立 远程 站 点 。 
A.FTP B. 本 地 /网 络 C. WebDav D. RDS 
7. Dreamweaver 的 【文档 】 窗 口 状态 栏 中 默认 显示 的 网 页 下 载 速 度 是 基于 ( ”) 网 速 的 。 
A. 512Kbps B. 56Kbps C. 1Mbps D. 2Mbps 
简 答 题 
8. 简 述 FTP 上传 方式 和 本 地 /网 络 方式 有 何 区 别 ? 
9. 网 站 的 宣传 方法 都 有 哪些 ? 
上 机 操作 题 
10. 申请 一 个 免费 的 网 站 空间 和 域名 。 
. 练习 对 网 站 的 兼容 性 、 下 载 速度 进行 测试 ， 并 检查 网 站 的 超级 链接 ， 对 错误 的 地 方 进 行 修复 。 
. 练习 配置 一 个 FTP 远程 站 点 ， 并 进行 远程 连接 ， 对 本 地 站 点 进行 发 布 。 
. 练习 在 百度 搜索 引擎 上 注册 网 站 (http://www.baidu.com/search/url_submit.html)。 
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使 用 Spry 框架 一 一 Dreamweaver 中 的 
Ajax 技术 


本 章 主要 介绍 Dreamweaver CS4 Spry 框架 的 用 法 ， 以 制作 Ajax 驱动 的 网 页 。 通 过 本 
章 的 学 习 ， 应 该 完成 以 下 学 习 有 目标: 

了解 Ajax 技术 和 Spry 框架 工具 

衣 了 解 并 学 会 在 Dreamweaver 中 使 用 XML 数据 

YY 掌握 Spry 布局 控件 的 用 法 

i 学 会 应 用 Spry 效果 

这 ”学 会 使 用 Spry 验证 控件 


12.1 了 解 Ajax 和 Spry 框架 


当前 ，Internet 已 经 步 入 了 一 个 新 时 代 一 一 Web 2.0 时代， 一 个 可 用 性 和 交互 性 的 新 时 
代 ， 其 典型 应 用 便 是 当前 流行 的 Blog、RSS、WIKI 等 。 而 Web 2.0 时 代 的 核心 技术 便 是 
Ajax， 即 异步 JavaScript 和 XML。 

用 户 首先 应 该 明确 的 是 ， Ajax 不 是 指 一 种 单一 的 技术 ， 而 是 有 机 地 利用 了 一 系列 相关 
的 技术 ， 这 包括 : 

? 基于 Web 标准 的 XHTML+CSS 表示 ; 

? 使 用 DOM 进行 动态 显示 和 交互 ; 

? 使 用 XML 和 XSLT 进行 数据 交换 及 相关 操作 ; 

? 使 用 XMLHttpRequest 进行 异步 数据 查询 、 检 索 ; 

最 后 ，JavaScript 用 来 将 所 有 这 些 技术 整合 在 一 起 。 

Ajax 中 的 关键 术语 是 Asynchronous( 异 步 )， 即 “不 同时 发 生 ”。 通 常情 况 下 ， 访 客 浏 
览 的 页 面 是 一 个 极其 线性 的 处 理 过 程 。 例 如 ， 您 在 Internet 上 正在 浏览 某 个 企业 的 站 点 ， 
过 程 如 下 : 

@ 用 您 的 浏览 器 访问 一 个 页 面 

@ 最 初 的 页 面 由 一 个 远程 服务 器 传送 

@ 您 的 浏览 器 呈现 出 了 页 面 
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@ 单 击 页 面 上 的 某 个 链接 ， 以 了 解 更 多 相关 的 信息 
@ 您 的 浏览 器 请 求 一 个 来 自 远程 Web 服务 器 的 带 有 其 他 信息 的 页 面 
@ Web 服务 器 传送 这 个 新 页 面 
@ 您 的 浏览 器 加 载 这 个 包含 新 详细 信息 的 页 面 ， 并 显示 出 整个 新 页 面 
但 如 果 该 企业 的 站 点 是 使 用 Ajax 驱动 的 ， 那 么 上 述 过 程 转变 为 : 
@ 用 您 的 浏览 器 访问 一 个 页 面 
@ 最 初 的 页 面 由 一 个 远程 服务 器 传送 
@ 您 的 浏览 器 呈现 出 了 页 面 ， 同 时 将 所 有 的 相关 信息 加 载 到 Ajax 引擎 中 
@ 单 击 页 面 上 的 某 个 链接 ， 以 了 解 更 多 相关 的 信息 
@@ Ajax 扮演 中 间 人 的 角色 , 捕 提 到 新 的 请 求 后 , 回 到 其 中 任何 一 个 相关 的 详细 信息 中 
@ 您 的 浏览 器 在 现 有 的 页 面 上 显示 出 了 新 的 详细 信息 ， 并 只 更 新 相关 的 页 面部 分 
从 本 质 上 讲 ，Ajax 为 页 面 加 载 了 相关 数据 ， 但 是 直到 浏览 器 发 出 请 求 时 才 会 显示 这 些 
相关 的 数据 。 这 样 ， 用 户 就 能 更 平滑 地 体验 这 些 信息 。 如 果 浏 览 器 请 求 加 载 更 多 的 数据 信 
息 ，Ajax 引擎 会 从 后 台 Web 服务 器 下 载 这 些 数据 ， 然 后 在 需要 的 时 候 传送 给 浏览 器 进行 
显示 。 与 传统 的 Web 应 用 相 比 ，Ajax 应 用 程序 的 优势 在 于 : 
? ”通过 异步 模式 ， 提 升 了 用 户 体验 ; 
? 优化 了 浏览 器 和 Web 服务 器 之 间 的 传输 ， 减 少 了 不 必要 的 数据 往返 ， 降 低 了 带宽 
占用 ; 
? Ajax 引擎 在 客户 端 运行 ， 承 担 了 一 部 分 原来 由 Web 服务 器 承担 的 任务 ， 从 而 降低 
了 大 用 户 量 下 的 服务 器 负载 。 
开发 Ajax 应 用 程序 需要 具备 深厚 的 JavaScript 编程 知识 , 好 在 Dreamweaver CS4 提供 
了 一 个 以 Spry 命名 的 Ajax 框架 ， 使 复杂 的 编程 变 成 了 简单 的 可 视 化 操作 。Spry 框架 是 一 
个 用 来 构建 Ajax 网 页 的 JavaScript 和 CSS 库 ， 包 含 4 套 不 同 的 Spry 工具 。 
?Spry 数据 控件 : 将 XML 数据 并 入 任何 一 个 页 面 ， 并 允许 数据 的 Ajax 样式 交互 
显示 。 
? Spry 表单 控件 ， 将 表单 元 素 (如 文本 域 、 列 表 等 ) 与 JavaScript 验证 功能 联合 起 来 。 
?Spry 布局 控件 ， 提供 一 系列 顶尖 的 布局 控件 ， 例 如 标签 面板 、 折 鳃 式 面 板 等 。 
? Spry 效果 : 通过 高 级 效果 扩展 了 Dreamweaver 行为 库 , 来 交互 影响 页 面 元 素 。Spry 
效果 包括 渐 隐 、 显 示 、 滑 动 、 晃 动 目标 等 。 
在 Dreamweaver CS4 中 , Spry 数据 控件 、Spry 表单 控件 、Spry 布局 控件 集中 在 【插入 】 
面板 的 【Spry】 类 别 下 ， 并 且 根 据 不 同 的 功能 又 将 其 分 配 在 相应 的 类 别 中 ， 方 便 归 类 与 用 
户 使 用 ， 如 图 12-1 所 示 。Spry 效果 则 位 于 Dreamweaver 的 行为 库 中 。 
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图 12-1 Dreamweaver CS4 提供 的 Spry 控件 


每 一 个 Spry 控件 都 由 以 下 3 部 分 组 成 : 

? 控件 结构 一 一 用 来 定义 控件 结构 组 成 的 HTML 代码 块 ; 

? 控件 行为 一 一 用 来 控制 控件 如 何 响应 用 户 事件 的 JavaScript 代码 ; 
? 控件 样式 一 一 用 来 指定 控件 外 观 的 CSS 代码 。 


12.2 XML 基础 知识 


XML， 即 可 扩展 标记 语言 (Extensible Markup Language)， 已 经 成 为 Web 上 存储 和 维护 
数据 的 标准 格式 。XML 中 的 数据 是 自 描述 的 , 而 且 是 按 层次 结构 组 织 的 。 除 最 顶层 的 标记 
以 外 ， 每 个 元 素 都 有 父 标 记 。 一 般 情况 下 ,XML 文件 在 其 最 顶层 的 标记 中 仅 描 述 所 包含 信 
息 的 类 型 。 


12.2.1 理解 XML 标记 


XML 是 一 种 标记 语言 。 要 理解 XML， 首 先 要 理解 标记 。 在 HTML 中 ， 标 记 ( 标 签 ) 的 
作用 是 告诉 浏览 器 这 段 文本 或 图 像 如 何 显示 , 例如 标记 <B> 的 含义 是 将 一 段 文 本 加 粗 显示 。 
XML 与 HTML 不 同 ， 它 没有 事先 提供 一 组 已 经 定义 好 了 的 标记 ， 而 是 提供 了 一 个 标准 ， 
开发 者 可 以 遵循 这 个 标准 ， 根 据 实际 需要 自 定义 标记 ,例如 定义 一 个 存储 书 名 的 标记 
<book>， 可 采用 如 下 方式 存储 一 本 书 的 名 称 : 

<book>Visual C# 2005 程序 设计 与 应 用 简明 教程 </book> 


标记 都 是 配对 使 用 的 ， 即 开标 记 和 闭 标记 ， 标 记 中 间 是 存储 的 数据 。 需 要 注意 的 是 在 
XML 中 , 标记 是 区 分 大 小 写 的 , 也 就 说 <book> 和 <BOOK> 代 表 不 同 的 标记 , 使 用 </BOOK> 
来 关闭 <book> 是 非法 的 。 从 本 质 上 说 ，XML 是 一 种 源 标 记 语言 ， 是 定义 语言 的 标准 ， 它 
允许 设计 者 根据 所 提供 的 规则 ， 制 定 各 种 各 样 的 标记 语言 。 


Dreamweaver 中 的 Ajax 技术 。 
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和 HTML 中 的 标记 一 样 ，XML 标记 也 可 以 嵌 套 使 用 ， 例 如 


<book> 

<title> Visual C# 2005 程序 设计 与 应 用 简明 教程 </title> 
<author> 严 涛 </author> 

<price>29.99 元 </price> 
<pressdate>2007-09-01</pressdate> 

</book> 


但 是 标记 不 允许 重合， 因此 在 父 标记 关 闭 之 前 ， 必 须 关 闭 所 有 的 子 标记 。 另 外 ， 可 以 
有 空 标记 ， 即 标记 中 没有 存储 的 文本 或 数据 。 

XML 标记 有 3 类 意义 : 结构 、 语 义 和 样 式 。 结 构 将 文档 分 成 标记 树 ， 不 同 的 标记 名 称 
没有 结构 上 的 意义 ; 语义 将 单个 的 标记 与 外 部 的 实际 事物 联系 起 来 , 它 的 意义 存在 于 XML 
文档 之 外 ， 在 作者 或 读者 的 心中 ， 或 者 是 某 些 生成 、 读 取 这 些 文档 的 计算 机 程序 中 ， 例 如 
讲 英语 的 人 可 能 会 比 <p> 或 <foo> 更 容易 理解 <document> 的 意义 ; 样式 则 指定 如 何 显示 这 些 
内 容 ， 说 明 指定 的 元 素 是 使 用 粗 体 、 斜 体 、 还 是 其 他 字体 来 显示 ， 在 XML 中 ， 样 式 是 通 
过 样式 单 施加 的 。 


12.2.2 XML 属性 


与 在 标记 内 存储 数据 一 样 ， 也 可 以 在 属性 内 存储 数据 ， 属 性 添加 到 标记 的 开标 记 内 ， 
其 中 属性 值 必须 包含 在 单 引号 或 双 引 号 内 ， 例 如 : 

<book title=="Visual C# 2005 程序 设计 与 应 用 简明 教程 "></book> 

或 者 

<book title 二 'Visual C# 2005 程序 设计 与 应 用 简明 教程 '></book> 


思 既然 在 XML 中 ， 可 以 使 用 标记 或 属性 这 两 种 方式 来 存储 数据 ， 那 么 在 具体 使 用 时 ， 应 
该 如 何 选择 呢 ? 
令 两 种 方式 实际 上 并 没有 太 大 的 区 别 。 如 果 日 后 需要 对 数据 添加 更 多 的 信息 ， 建 议 最 好 


使 用 标记 来 存储 ， 因 为 可 以 对 标记 添加 子 标记 或 属性 ,而 对 于 属性 则 不 可 以 。 如 果 文 件 不 
进行 压缩 就 需要 传送 到 网 络 上 ， 由 于 属性 占用 更 少 的 带宽 ， 更 便于 保存 一 些 对 文档 的 每 一 
位 用 户 无 关 紧 要 的 信息 ， 建 议 使 用 属性 来 存储 数据 。 


12.2.3 XML 声明 


除了 标记 和 属性 外 ，XML 文档 还 包括 许多 其 他 组 成 部 分 ， 它 们 统称 为 XML 文档 的 节 
点 ，XML 声明 通常 是 XML 文档 的 第 一 个 节点 ， 包 含 在 几乎 所 有 的 XML 文档 中 。XML 声 
明 的 格式 非常 类 似 于 标记 , 但 在 标记 内 有 问号 , 它 通常 的 名 称 是 xml, 并 带 有 version 属性 ， 
最 简单 的 声明 形式 为 : 


hes_ 


。 第 12 章 使 用 Spry 框架 一 Dreamweaver 中 的 Ajax 技术 。 


<? xml Version="1.0"2?> 


另外 ， 还 可 以 在 XML 声明 中 包含 属性 encoding， 其 值 表示 用 于 读 取 文 档 的 字符 集 ， 
例如 UTF-16 表示 文档 使 用 16 位 Unicode 字符 集 , 还 可 以 包含 standalone 属性 , 其 值 为 yes 
或 no， 表示 XML 文档 是 否 依赖 于 其 他 文件 。 


12.2.4 XML 文档 的 结构 


XML 中 的 完整 数据 集 就 是 XML 文档 。XML 文档 可 以 是 计算 机 上 的 物理 文件 ， 或 者 
内 存 中 的 字符 串 , 但 其 本 身 必须 是 完整 的 , 遵循 一 定 的 规则 。XML 文档 由 许多 不 同 的 部 分 
组 成 ， 其 中 最 重要 的 就 是 XML 标记 ， 它 存储 着 文档 的 实际 数据 。XML 文档 最 大 的 特点 是 
提供 了 一 种 结构 化 的 数据 组 织 、 存 储 方式 ， 这 与 传统 的 关系 数据 库 系统 存储 数据 的 方式 有 
很 大 不 同 。 在 关系 数据 库 中 ， 通 过 表 来 存储 数据 ， 表 通过 列 值 而 发 生 关 联 ， 每 一 个 表 在 行 
和 列 中 存储 数据 : 每 一 行 存储 一 条 记录 ， 每 一 列 存储 该 记录 的 特定 数据 项 。 

相反 ， 在 XML 文档 中 ， 数 据 是 分 层 组 织 和 存储 的 ， 这 类 似 于 Windows Explorer 中 的 
文件 夹 和 文件 。 但 每 一 个 XML 文档 必须 有 一 个 根 节 点 ， 其 中 包含 所 有 的 节点 和 数据 ， 如 
果 在 文档 的 顶级 中 包含 多 个 节点 ， 则 该 文档 是 非法 的 ， 但 可 以 在 顶级 中 包含 XML 声明 。 
例如 下 面 的 XML 文档 是 合法 的 : 

<? xml version="1.0"?> 

<books> 

<book>Visual C# 2005 程序 设计 与 应 用 简明 教程 </book> 

<book>SQL Server 2005 数据 库 原理 与 应 用 简明 教程 </book> 


<book>ASP .NET 2.0 开发 技术 简明 教程 </book> 
</books> 


但 是 下 面 的 XML 文档 就 不 合法 : 


<? xml Version="1.0"?> 

<book> Visual C# 2005 程序 设计 与 应 用 简明 教程 </book> 

<book> SQL Server 2005 数据 库 原理 与 应 用 简明 教程 </book> 

<book> ASP.NET 2.0 开发 技术 简明 教程 </book> 

利用 XML 文档 来 组 织 和 存储 数据 具有 很 大 的 灵活 性 ， 不 需要 任何 预定 义 的 结构 ， 而 
关系 数据 库 总 是 在 添加 数据 之 前 定义 信息 的 存储 结构 ， 所 以 XML 是 存储 小 型 数据 的 最 简 
便 方式 。 


12.2.5 创建 XML 文档 


下 面 创建 一 个 XML 文档 ， 该 文档 将 是 本 章 网 页 所 基于 的 数据 源 。 启 动 Dreamweaver 
CS4， 选 择 【 文 件 】| 【新建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 。 在 左 侧 选择 【空白 页 】 选 
项 ， 在 【页 面 类 型 】 列 表 中 选择 【XML】， 如 图 12-2 所 示 。 
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二 
a 


12-2 新建 XML 文档 


单 击 【 创 建 】 按 钮 ，【 文 档 】 窗 口中 显示 一 个 未 命名 的 XML 文档 ， 


如 图 12-3 所 示 。 
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12-3 ”编辑 XML 文档 内 容 


编辑 文档 内 容 ， 


完成 内 容 的 编写 后 ， 按 Ctrl+S 键 进 行 保 存 。 系 统 打开 【另存 为 】 对 话 框 。 首 先 指 定 文 


档 的 名 称 和 保存 位 置 ， 然 后 在 【保存 类 型 】 下 拉 列 表 框 中 选择 【XML 文档 】 


才 是 XML 文档 ， 如 图 12-4 所 示 。 


Popp 


Ee 


Ey 


图 12-4 将 文档 保存 为 XML 类 型 


， 这 样 保存 的 


。 第 12 章 使 用 Spry 框架 一 Dreamweaver 中 的 Ajax 技术 。 


提示 : CDATA 分 隔 符 允 许 XML 数据 包含 XML 标签 , 例如 图 12-3 中 的 XML 文件 中 
就 包含 了 一 个 完全 格式 化 的 HTML 无 序列 表 。 


12.3 ”使 用 Spry 数据 控件 


通过 在 页 面 中 插入 Spry 数据 控件 , 用 户 可 以 在 浏览 器 中 以 动态 方式 与 页 面 进 行 快速 交 
换 。 例 如 可 以 插入 一 个 可 排序 的 表格 ， 用 户 无 需 执 行 整 页 刷新 ， 就 可 以 重新 排列 该 表格 ; 
或 者 在 表格 中 包含 Spry 动态 表格 对 象 来 触发 页 面 上 其 他 位 置 的 数据 更 新 。Spry 框架 提供 
了 4 个 数据 控件 : 
Spry 数据 集 一 一 用 于 标识 网 页 所 基于 数据 的 XML 源 文件 ; 
Spry 区 域 一 一 定义 Spry 区 域 ， 用 于 容纳 Spry 数据 对 象 ; 
Spry 重复 项 一 一 用 于 定义 可 重复 显示 的 区 域 ; 
Spry 重复 列表 一 一 定义 并 显示 重复 列表 ; 


12.3.1 创建 Spry 数据 集 


要 在 网 页 中 使 用 XML 文档 中 的 数据 ,就 必须 首先 标识 包含 数据 的 XML 源 文件 ， 即 创 
建 Spry 数据 集 ， 然 后 才能 在 页 面 中 插入 一 个 或 多 个 Spry 数据 控件 以 显示 此 数据 。 当 用 户 
在 浏览 器 中 打开 该 页 面 时 ， 该 数据 集会 作为 XML 数据 的 一 个 扁平 面 化 数组 进行 加 载 。 该 
数组 就 像 一 个 包含 行 和 列 的 标准 表格 。 

例 12-1 创建 Spry 数据 集 。 

各 启动 Dreamweaver CS4, 在 【文件 】 面 板 打 开本 章 提供 的 素材 ， 双 击 start.htm 打开 
该 文档 ， 如 图 12-5 所 示 。 


3 


12-5 starthtm 页 面 


各 在 【插入 】 面 板 中 ,切换 到 【Spry】 分 类 ， 单 击 【Spry 数据 集 】 按 钮 ， 打开 【Spry 
数据 集 】 对 话 框 。 

各 在 【选择 数据 类 型 】 下 拉 列 表 框 中 选择 XML， 在 【数据 集 名 称 】 文 本 框 中 将 名 称 
命名 为 “booklist” 。 

人 单 击 [浏览 ] 按 钮 ,在 打开 的 【选择 XML 源 ] 对 话 框 中 ,导航 到 本 章 素材 中 的 data.xml 
文档 ( 即 12.2.5 节 中 创建 的 XML 文档 ) 并 选择 ， 单 击 【 确 定 】 按 钮 。 
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加 选择 的 XML 文档 名 称 将 显示 在 【指定 数据 文件 】 文 本 框 中 。 当 架构 显示 在 【 行 元 
素 】 列 表 框 中 时 ， 单 击 重复 的 登录 项 book， 如 图 12-6 所 示 。 


12-6 建立 Spry 数据 集 


注意 : 制作 Ajax 网 页 时 ， 必 须 对 站 点 配置 测试 服务 器 ， 否 则 Dreamweaver CS4 会 提 
示 图 12-7 所 示 的 对 话 框 。 单 击 【 测 试 服务 器 】 链 接 ,， 在 打开 的 站 点 定义 对 话 框 中 , 设置 服 
务 器 模型 、 访 问 方式 以 及 测试 服务 器 文件 ， 如 图 12-8 所 示 。 在 选择 服务 器 模型 时 ， 用户 可 
根据 自己 擅长 的 语言 进行 选择 ， 这 里 选择 的 是 ASP.NET C#。 


bit 
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图 12-7 提示 配置 站 点 测试 服务 器 的 对 话 框 图 12-8 配置 站 点 的 测试 服务 器 


人 @ 可 以 在 下 方 的 【数据 预览 】 列 表 框 中 检查 数据 是 否 可 用 以 及 正确 ,如 图 12-9 所 示 。 


mln | eather | Pio | red ee | pe 区 Cr 他 
9 [1007-09- | 7 
3 | 7 


图 12-9 预览 数据 集中 的 内 容 


站 下 面 来 更 改 数据 列 的 数据 类 型 。 单 击 【下 一 个 】 按 钮 ， 在 【 列 名 称 】 下 拉 列 表 框 中 
选中 【pressdate】 列 ， 在 【类 型 】 下 拉 列 表 框 中 选择 【日 期 】。 用 同样 的 方法 将 【pic】 列 
设置 为 【html】 数 据 类 型 。 

提示 : Dreamweaver 默认 所 有 列 为 字符 串 类 型 。 设 置 适当 的 数据 类 型 对 于 分 类 操作 是 
十 分 必要 的 ， 例 如 利用 数字 类 型 进行 排序 。 另 外 , 如 果 希 望 某 个 列 的 值 作为 图 像 的 src 值 ， 


ho 


[中 的 Ajax 技术 。 
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则 必须 将 其 设置 为 html 类 型 。 
和 从 【对 列 排序 】 下 拉 列 表 框 中 选择 【pressdate】〗， 将 排序 方式 设置 为 【降序 】， 如 
图 12-10 所 示 。 


1 
= | -上 F Er 
上 最 
= a EA 
= s | = 下 
上 沿 
i a Ee | 
Wm | | 


图 12-10 更 改 列 的 数据 类 型 并 设置 排序 规则 


人 @ 单 击 【 下 一 个 】 按 钮 选择 【 不 要 插入 HTML】。 单 击 【 完 成 】 按 钮 ，【 绑 定 】 
面板 将 显示 定义 的 XML 数据 集 及 其 字段 列 ， 如 图 12-11 所 示 。 
网 选择 【文件 】| 【保存 】 命 令 ， 当 出 现 【复制 相关 文件 】 对 话 框 时 ， 单 击 【 确 定 】 


按钮 ， 如 图 12-12 所 示 。 
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图 12-11 创建 的 Spry 数据 集 图 12-12 【复制 相关 文件 】 对 话 框 


注意 : Dreamweaver CS4 需要 为 创建 的 Spry 数据 集 定义 几 个 JavaScript 文件 ， 以 使 
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其 正常 地 运行 。 用 户 必须 在 本 地 站 点 中 复制 图 12-12 中 出 现 的 相关 文件 ,否则 可 能 导致 Spry 
数据 功能 运行 错误 。 
僻 虽然 starthtm 文档 的 【设计 】 视 图 中 没有 明显 变化 ， 但 Dreamweaver CS4 已 经 插 
入 了 大 量 的 关键 代码 , 除了 图 12-12 中 复制 的 JavaScript 文件 外 ,一 个 JavaScript 函数 也 包 
含 在 了 文档 的 <head> 标 签 中 ， 读 者 可 切换 到 【代码 】 视 图 查看 : 
<script type="text/javascript"> 
<!-- 
var booklist = new Spry-Data-XMLDataSet 
("data.xml","books/book", 
{sortOonLoad:"pressdate", sortOrderOnLoad:"descending"}); 
booklist.setColumnType ("pressdate", "date"); 
booklist.setColumnType ("pic", “html"); 
> 


</script> 
该 JavaScript 函数 应 用 了 【Spry 数据 集 】 对 话 框 中 设置 的 所 有 人 参数， 包括 列 的 类 型 。 
12.3.2 使 用 Spry 区 域 


Spry 框架 使 用 两 种 类 型 的 区 域 : 一 种 是 围绕 数据 对 象 (如 表格 、 重 复 列表 ) 的 Spry 区 域 ; 
另 一 种 是 Spry 详细 区 域 ， 该 区 域 与 主 表格 对 象 一 起 使 用 时 ， 可 人 允许 对 Dreamweaver 页 面 
上 的 数据 进行 动态 更 新 。 

所 有 的 Spry 数据 对 象 都 必须 括 在 Spry 区 域 中 ， 如 果 在 添加 Spry 区 域 之 前 尝试 向 页 面 
中 添加 Spry 数据 对 象 ，Dreamweaver 将 提示 用 户 添加 Spry 区 域 。 默 认 情况 下 ，Spry 区 域 
位 于 Div 容器 中 。 用户 可 以 在 添加 表格 之 前 添加 Spry 区 域 , 也 可 以 在 插入 表格 或 重复 列表 
时 由 系统 自动 添加 Spry 区 域 。 


12.3.3 ”使 用 Spry 表格 


网 页 设计 者 通常 在 一 个 两 行 表格 中 显示 Spry 数据 集中 链接 的 数据 。 表 格 上 部 的 一 行 包 
含 栏 标 题 ， 它 可 以 有 选择 性 地 对 下 面 的 数据 进行 分 类 。 表 格 的 第 二 行 包 含 数据 变量 ， 当 浏 
览 页 面 时 ， 这 些 变量 就 被 实际 的 数据 值 替 换 。 

在 下 面 的 例子 中 ， 我 们 将 把 一 个 Spry 表格 插入 到 start.htm 页 面 上 ， 并 显示 例 12-1 创 
建 的 booklist 数据 集中 部 分 列 的 内 容 。 

例 12-2 添加 Spry 表格 。 

入 继续 例 12-1。 在 【文档 】 窗 口中 选中 占 位 符 “文本 占 位 符 ”， 按 Delete 键 将 其 
删除 。 

加 在 【 绑 定 】 面 板 中 双击 Spry 数据 集 booklist， 重 新 打开 【spry 数据 集 】 对 话 框 。 

加 单 击 【下 一 个 】 按 钮 ， 选 择 【插入 表格 】， 单 击 【设置 】 按 钮 ， 打 开 【Spry 数据 
集 -插入 表格 】 对 话 框 。 在 【 列 数 】 列 表 框 中 分 别 选中 author、pic、content、feature， 单 击 


hz2 


*。 第 12 章 ， 使 用 Spry 框架 一 -Dreamweaver 中 的 Ajax 技术 。 


人 @ 分 别 选中 tile、price、pressdate， 然 后 选中 【 单 击 标题 时 将 对 列 排序 】 复 选 框 。 

加 下 面 对 Spry 表格 中 的 数据 应 用 一 些 CSS 样式 。 从 【奇数 行 类 】 下 拉 列 表 中 选择 
【oddRow】 ， 从 【 晤 停 类 】 下 拉 列 表 框 中 选择 【hoverRow】 ，【 偶 数 行 类 】 保 持 空 白 ， 
从 【选择 类 】 下 拉 列 表 框 中 选择 【selectRow】， 如 图 12-14 所 示 。 

oddRow、hoverRow、selectRow 是 设计 好 的 CSS 样式 ， 它 们 的 代码 如 下 所 示 : 


-oddRowi 


background-color: #FFFF99; 
} 
.hoverRow, .selectRow{ 
background-color: #FFFFOO; 
cursor: pointer; 


cursor: hand; 
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加 理由 全 四 时 村 对 了 由 计 


图 12-13 选择 Spry 表格 中 要 显示 的 列 12-14 为 Spry 表格 中 的 数据 应 用 CSS 样式 


加 为 了 建立 与 该 Spry 表格 相 联系 的 Spry 详细 区 域 ， 选 中 【 单 击 行 时 将 使 用 “更 新 ” 
详细 区 域 】 复 选 框 。 

食 单 击 【确定 ] 按钮 , 返回 【Spry 数据 集 】 对 话 框 。 单 击 【完成 】 按钮 , 当 Dreamweaver 
提示 是 否 添加 Spry 区 域 时 , 单 击 【是 】 按 钮 。 此 时 页 面 中 显示 插入 的 Spry 表格 , 如 图 12-15 
所 示 。 

人 @ 选择 栏 标题 “tile”， 按 Delete 键 删除 ， 然 后 重新 输入 “ 书 名 ”。 用 同样 的 方法 更 
改 “Price” 为 “定价 ”、“ 了 Pressdate” 为 “出 版 日 期 ”， 如 图 12-16 所 示 。 


FE9 
图 12-15 页 面 中 插入 的 Spry 表格 12-16 ”更改 Spry 表格 的 标题 


人 @ 将 光标 移 到 Spry 表格 相 邻 的 列 之 间 ， 当 光标 变形 时 拖 动 ， 改 变 列 的 宽度 以 便 容纳 
列 的 内 容 ， 如 图 12-17 所 示 。 


Te 
图 12-17 调整 Spry 表格 列 的 宽度 
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克 下 面 来 为 Spry 表格 应 用 设计 好 的 CSS 样式 。 将 光标 置 于 Spry 表格 中 ， 在 标签 选 
择 器 中 单 击 标签 <table>， 在 属性 检查 器 中 ， 从 【表格 】 下 拉 列 表 中 选择 dataTable 样式 ， 
在 【间距 】 文 本 框 中 输入 0， 如 图 12-18 所 示 。 


组 要 昼 古 加 2 | 寅 出 er | 俊 汪 ”| 汉 ] 术 充 包 )| | 对 刘刚 于 U [wj ”区 名 | 无 ep 


— ED 到 Eis 间距 上 pm 过 程 思 


I 一 你 加 


图 12-18 为 Spry 表格 应 用 CSS 样式 


dataTable 样式 将 表格 宽度 设置 为 100%， 并 对 表格 内 的 所 有 单元 格 应 用 填充 ， 其 代码 
如 下 所 示 : 


#dataTable td, #dataTable th{ padding: 5px; } 
th 1 texmt=aliogns Lefts 
cursor: pointer; 
cursor: hand; 
} 
妈 按 Ctrlts 键 保存 文件 。 按 F12 键 在 主 浏览 器 中 预览 效果 ， 将 光标 移 至 任意 一 行 上 
来 查看 “ 悬 停 ” 样 式 ， 如 图 12-19 左 图 所 示 。 单 击 “定价 ”标题 可 按 价格 高 低 改变 先后 顺 
序 ， 如 图 12-19 右 图 所 示 。 
计算 机 应 用 


可 机 US 和 
交合。 dgB 妇 至 
让 0 0 


”tS 2 oan 2007.09-01 
12-19 ”预览 Spry 表格 效果 


魏 将 文档 另存 为 finalhtml。 

将 例 12-2 创建 的 Spry 表格 作为 主 表格 对 象 ， 在 页 面 的 另 一 个 区 域 一 一 Spry 详细 区 域 ， 
显示 其 他 相关 的 图 像 和 文本 。 

例 12-3 添加 Spry 详细 区 域 。 

各 继续 例 12-2， 首 先 将 文档 另存 为 finall .html。 双 击 “ 图 书 封面 ” 占 位 符 ， 打 开 【 选 
择 图 像 源 文件 】 对 话 框 ， 选 中 【数据 源 】 单 选 按钮 。 

加 从 【 域 】 列 表 中 选中 【pic】 数 据 列 ， 将 光标 定位 在 【URL】 文 本 框 中 ， 在 数据 变 
量 {booklist:pic} 之 前 ， 输 入 “images/”， 如 图 12-20 所 示 。 


hza_ 
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Dreamweaver 中 的 Ajax 技术 。 


图 12-20 【选择 图 像 源 文件 】 对 话 杠 


加 单 击 【 确 定 】 按 钮 ，【 文 档 】 窗 口中 会 出 现 断 裂 的 图 像 占 位 符 。 但 用 户 不 必 担 心 ， 
当 在 浏览 器 中 浏览 时 ， 就 会 出 现 正确 的 图 像 。 下 面 来 添加 动态 文本 元 素 。 

人 @ 选中 文本 占 位 符 “ 内 容 简介 ”, 按 Delete 键 将 其 删除 ,在 【 绑 定 ] 面 板 中 选中 [content】 
列 ， 然 后 单 击 【 插 入 】 按 钮 ， 如 图 12-21 所 示 。Dreamweaver 会 为 添加 的 Spry 动态 文本 自 
动 插 入 相关 代码 。 

人 @ 选中 文本 占 位 符 “ 本 书 特色 ”， 用 同样 的 方法 将 其 删除 后 ， 绑 定 到 数据 集 booklist 
的 【feature】 列 。 

人 @ 要 完成 Spry 详细 区 域 和 Spry 表格 之 间 的 链接 ， 首 先 需 要 识别 页 面 区 域 中 的 Spry 
详细 区 域 。 从 标签 选择 器 中 选择 标签 <div#right>( 即 图 像 占 位 符 和 动态 文本 所 在 的 Div 容 
器 ), 按 Ctrl+HT 键 打开 快速 标签 编辑 器 。 输 入 代码 “spry:detailregion="booklist"”, 如 图 12-22 
所 示 ， 按 Enter 键 使 设置 起 作用 。 


编辑 标签 : 《div id="right” spry: detailregion="booklist"M 


图 12-21 绑 定 动态 文本 元 素 图 12-22 ”快速 编辑 标签 


提示 : 用 户 可 以 注意 到 ， 标签 选 择 器 中 的 <div#right> 标 签 变 成 红 检 色 显示 ， 这 是 因为 
该 标签 带 有 了 Spry 属性 。 此 外 ， 由 于 添加 了 详细 区 域 ， 动 态 文本 变量 被 修改 为 {content} 
和 {feature}。 

食 按 Ctrlts 键 保存 页 面 。 按 F12 键 预览 页 面 ， 在 主 区 域 (Spry 表格 ) 中 单 击 任意 一 行 ， 
Spry 详细 区 域 都 将 显示 其 对 应 的 内 容 ， 如 图 12-23 所 示 。 
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图 12-23 ”页面 的 运行 效果 


12.3.4 使 用 Spry 重复 项 和 Spry 重复 列表 


用 户 可 以 添加 重复 区 域 来 显示 数据 。 重 复 区 域 是 一 个 简单 数据 结构 ， 用 户 可 以 根据 需 
要 设置 它 的 格式 以 显示 数据 。 例如, 使 用 Spry 重复 项 ( 即 Spry 重复 区 域 ) 可 以 将 一 组 照片 逐 
个 地 放 在 页 面 某 个 布局 对 象 中 ， 如 图 12-24 所 示 。 

对 于 经 过 排序 的 列表 , 或 者 未 经 排序 的 项 目 符号 列表 , 用 户 可 以 通过 dtd 
它们 在 页 面 中 重复 显示 。 例 如 ， 对 于 图 12-24 中 的 重复 项 ， 如 果 采 用 重复 列表 方式 进行 
示 ， 那 么 Dreamweaver 会 在 每 项 前 面 添加 一 个 项 目 符号 ， 如 图 12-25 所 示 。 


图 12-24 Spry 重复 项 效果 12-25 ”Spry 重复 列表 效果 


12.4 ”使 用 Spry 布局 控件 


Spry 布局 控件 合并 了 顶尖 的 JavaScript 效果 和 完整 的 CSS 样式 ， 可 帮助 网 页 设计 者 快 
速 将 经 典 的 网 页 布局 应 用 到 页 面 上 。 


he 


*。 第 12 章 ， 使 用 Spry 框架 一 Dreamweaver 中 的 Ajax 技术 。 


12.4.1 使 用 Spry 菜单 栏 


Spry 菜单 栏 是 一 组 可 导航 的 菜单 按钮 ， 当 访问 者 将 鼠标 指向 其 中 的 某 个 按钮 上 时 ， 将 
显示 相应 的 子 菜单 。 使 用 Spry 菜单 栏 可 以 在 紧凑 的 空间 中 显示 大 量 导航 信息 , 方便 访客 快 
速 访问 到 目标 页 面 。 

1. 创建 Spry 菜单 栏 

”要 创建 Spry 菜单 栏 ， 可 将 【插入 】 面 板 切换 到 【Spry】 类 别 ， 单 击 【Spry 菜单 栏 】 按 
钮 悦 ， 打 开 【Spry 菜单 栏 】 对 话 框 。Spry 框架 提供 了 两 种 布局 方式 ， 水 平和 垂直 。 这 里 
选中 【水 平 】 单 选 按 钮 ， 单 击 【 确 定 】 按 钮 ， 即 可 创建 一 个 水 平 样式 的 Spry 导航 菜单 栏 ， 
如 图 12-26 所 示 。 图 12-27 所 示 为 垂直 样式 的 Spry 菜单 栏 。 


活 淮 际 也 因 时 也 局 。 


"四 *s 
本 


图 12-26 水 平 样式 的 Spry 菜单 栏 12-27 垂直 样式 的 Spry 菜单 栏 


按 Ctrl+S 键 保存 文档 ， 即 可 预览 默认 样式 的 Spry 菜单 栏 ， 当 某 个 菜单 栏 右 侧 出 现 小 
三 角 时 ， 表 示 该 菜单 还 包括 子 菜 单 。 水 平 Spry 菜单 栏 和 垂直 Spry 菜单 栏 的 编辑 方法 类 似 ， 
下 面 以 垂直 Spry 菜单 栏 为 例 ， 介 绍 如 何 编辑 Spry 菜单 栏 。 

2. 编辑 Spry 菜单 栏 

在 页 面 中 创建 了 Spry 菜单 栏 后 ， 可 通过 属性 检查 器 来 设置 Spry 菜单 栏 的 名 称 ， 如 图 
12-28 所 示 。 默 认 的 Spry 菜单 栏 名 称 为 MenuBarl1， 用 户 可 重新 命名 ， 但 注意 不 要 使 用 汉 
字 。 单 击 【 禁 用 样式 】 按 钮 ，Spry 菜单 栏 将 变 成 项 目 列表 。 
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图 12-28 Spry 菜单 栏 的 属性 检查 器 
从 图 12-28 中 可 以 看 出 , 默认 的 Spry 菜单 栏 只 有 两 级 ,在 第 一 级 菜单 列表 框 中 选中 【项 


目 1】 选 项 ， 可 以 在 【文本 】 对 话 框 中 对 该 菜单 重新 命名 ， 如 “公司 简介 ”。 用 同样 的 方 
法 可 为 其 他 的 各 级 菜单 重 命 名 ， 如 图 12-29 所 示 。 
3 
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图 12-29 ”修改 菜单 名 称 


既然 Spry 菜单 栏 是 用 于 页 面 导航 的 ， 那 就 离 不 开 链 接 。 要 为 菜单 设置 链接 ， 可 首先 在 
菜单 列表 框 中 选中 该 菜单 ， 然 后 在 【链接 】 文 本 框 中 设置 目标 页 面 的 路 径 。 在 【标题 】 文 
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本 框 中 可 以 设置 菜单 的 提示 文本 信息 , 在 【目标 】 文 本 框 中 可 以 指定 目标 页 面 的 打开 位 置 。 

默认 的 Spry 菜单 栏 的 菜单 数量 有 限 ， 一 级 菜单 只 有 4 个 。 在 一 级 菜单 列表 框 的 顶部 单 
击 【+】 按 钮 ， 列 表 框 中 将 出 现 一 个 默认 为 “无 标题 项 目 ” 的 菜单 ， 重 新 命名 即 可 。 如 果 
要 为 某 个 菜单 添加 子 菜单 ， 可 首先 选中 它 ， 然 后 在 其 下 级 菜单 列表 框 中 单 击 【+】 按 钮 ， 
添加 菜单 项 即 可 。 如 果 要 删除 某 个 菜单 , 可 首先 选中 它 , 然后 单 击 其 所 在 列表 框 顶部 的 [一 】 
按钮 ， 该 菜单 相应 的 子 菜单 也 将 被 同时 删除 。 

如 果 用 户 需 要 调整 菜单 的 显示 顺序 ， 可 首先 选中 它 ， 然 后 单 击 菜单 列表 框 顶 部 的 向 上 
或 向 下 三 角 按钮 即 可 。 


12.4.2 ”使 用 Spry 选项 卡 式 面板 


Spry 选项 卡 式 面板 可 以 将 内 容 放 置 在 紧凑 的 页 面 空 间 中 , 访问 者 可 以 通过 单 击 要 访问 
面板 上 的 选项 卡 标签 ， 来 隐藏 或 显示 选项 卡 面板 中 的 内 容 。 

1. 创建 Spry 选项 卡 式 面 板 四 

将 【插入 】 面 板 切 换 到 【Spry】 类 别 ， 单 击 【Spry 选项 卡 式 面板 】 按 钮 园 ， 光 标 所 在 
的 位 置 将 出 现 一 个 Spry 选项 卡 面板 ， 如 图 12-30 所 示 。 

默认 情况 下 ， 选 项 卡 面板 打开 的 是 Tabl 选项 卡 面板 。 要 打开 其 他 的 选项 卡 面板 ， 可 
将 光标 移 向 选项 卡 顶 部 的 标签 ， 当 出 现 眼 睛 图 标 时 单 击 即 可 。 

2. 编辑 Spry 选项 卡 式 面 板 

要 更 改选 项 卡 标签 的 名 称 , 可 首先 切换 到 该 选项 卡 面板 , 然后 选中 标签 并 按 Delete 键 ， 
重新 输入 即 可 。 在 面板 中 ， 用 户 可 以 输入 文本 ， 也 可 以 插入 图 像 等 元 素 ， 方 法 与 在 表格 中 
的 操作 相同 ， 如 图 12-31 所 示 。 

新 建 的 Spry 选项 卡 式 面板 的 默认 名 称 为 TabbedPanelsl, 在 属性 检查 器 中 , 可 以 在 【 选 
项 卡 式 面 板 】 文 本 框 中 对 其 重新 命名 。 另 外 ， 默 认 情 况 下 ，Spry 选项 卡 式 面板 只 包含 两 个 
选项 卡 面 板 ， 单 击 【+】 按 钮 可 进行 添加 。 


12-30 创建 Spry 选项 卡 式 面板 图 12-31 编辑 选项 卡 面板 内 容 
预览 页 面 时 ，Spry 选项 卡 式 面板 总 是 默认 打开 Tabl 选项 卡 面板 。 如 果 希 望 默 认 显示 
其 他 选项 卡 面板 ， 可 在 【默认 面板 】 下 拉 列 表 框 中 选中 该 面板 ， 如 图 12-32 所 示 。 
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图 12-32 更 改 默 认 显 示 的 选项 卡 面板 


ha 


。 第 12 章 使 用 Spry 框架 一 Dreamweaver 中 的 Ajax 技术 。 


在 Spry 选项 卡 式 面 板 中 添加 选项 卡 面板 以 及 调整 选项 卡 面板 顺序 的 方法 与 Spry 菜单 
栏 相似 ， 读 者 可 参阅 12.4.1 节 内 容 。 


12.4.3 ”使 用 Spry 折 又 式 控件 


Spry 折合 式 控件 是 一 组 可 折 锥 的 面板 ， 当 单 击 不 同 的 面板 标签 时 ， 该 面板 就 会 相应 的 
展开 或 收缩 。 在 折合 控件 中 ， 每 次 只 能 有 一 个 面板 处 于 打开 可 见 的 状态 。Spry 折 车 式 控 件 
的 编辑 方法 与 Spry 选项 卡 式 面板 控件 相似 , 但 不 能 更 改 默 认 打 开 的 面板 , 而 且 面 板 的 高 度 
都 是 固定 的 。 如 果 内 容 溢出 ， 则 会 自动 添加 滚动 条 以 显示 。 

下 面 的 例子 基于 例 12-2。 把 Spry 折合 式 控件 并 入 Spry 详细 区 域 中 ， 用 折 苔 面板 来 显 
示 动 态 文 本 内 容 。 

例 12-4 添加 Spry 折 又 式 面板 。 

入 打开 例 12-2 保存 的 页 面 final.html， 选择 【文件 】| 【另存 为 】 命 令 ， 将 页 面 另存 为 
final2.html。 

加 选中 文本 占 位 符 “ 内 容 简介 ”， 在 标签 选择 器 选中 标签 <p>， 按 Delete 键 将 占 位 符 
内 容 连 同 标签 一 同 删除 。 

加 用 同样 的 方法 删除 文本 占 位 符 “ 图 书 特色 ”及 其 所 在 的 <p> 标 签 。 

入 下 面 来 在 Spry 详细 区 域 中 添加 Spry 折 释 式 面板 。 将 【文档 】 窗 口 切 换 到 【代码 】 
视图 。 将 光标 置 于 图 12-33 左 图 所 示 位 置 ， 即 动态 图 像 元 素 所 在 Div 容器 的 后 面 。 

加 在 【插入 】 面 板 的 【Spry】 分 类 下 ， 单 击 【Spry 折 又 式 】 按 钮 虹 。Dreamweaver 
将 默认 的 Spry 折 重 式 面 板 插入 了 页 面 上 ， 如 图 12-33 右 图 所 示 。 最 初 的 Spry 折合 式 控件 
包含 两 个 折 芋 式 面板 。 默 认 只 显示 上 部 的 那个 面板 ,一 个 带 有 “Spry 折 艾 式 :Accordion1” 
的 蓝 色 标 签 和 边框 标记 了 该 Spry 折 僵 式 控件 。 


- 


图 12-33 ”添加 Spry 折 熏 式 控件 


人 @ 选择 占 位 符 “Labell1”， 按 Delete 键 将 其 删除 ， 然 后 重新 输入 “内 容 简 介 ”。 

加 以 同样 的 方法 用 “图 书 特色 ”替换 文本 占 位 符 “Label2”。 下 面 来 为 折 著 式 盏 
加 动态 内 容 。 

© 选择 文本 占 位 符 “ 内 容 1”, 按 Delete 键 将 其 删除 。 从 【 绑 定 1 面板 中 选择 【content】， 
单 击 【 插 入 】〗 按 钮 。 

和 @ 移动 光标 经 过 底部 折 共 式 面板 标签 , 当 看 到 标签 右 侧 出 现 眼睛 图 标 时 单 击 ,展开 “图 
书 特色 ”面板 。 选 择 文本 占 位 符 “ 内 容 2”， 按 Delete 键 将 其 删除 。 从 【 绑 定 】 面 板 中 选 
择 【feature】， 单 击 【 插 入 】 按 钮 。 

罗 将 光标 定位 在 “图 书 特色 ”面板 中 ， 从 标签 选择 器 中 单 击 标签 
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<div.AccordionPanelContent> ， 按 Ctrlt+T 键 打开 快速 标签 编辑 器 ， 输 入 代码 
“spry:detailregion="booklist" >"， 按 Enter 键 保存 。 

亿 切换 到 “内 容 简介 ”面板 ， 用 同样 的 方法 为 该 面板 的 <div.AccordionPanelContent> 
标签 添加 spry:detailregion 属性 。 

四 下 面 对 图 像 占 位 符 进行 设计 。 重 复 例 12-3 中 步骤 @@-@@ 的 操作 。 

全 再 次 选中 图 像 占 位 符 ， 然 后 从 标签 选择 器 中 单 击 标签 <div>， 按 Ctrl+T 键 打开 快速 
标签 编辑 器 ， 输 入 代码 "spry:detailregion="booklist"， 如 图 12-34 所 示 ， 按 Enter 键 保存 。 

碟 现在 已 经 完成 了 折叠 面板 的 功能 ， 接 下 来 为 折 和 又 面板 应 用 一 些 CSS 样式 。 在 【CSS 
样式 】 面 板 的 底部 单 击 【 附 加 样式 表 】 按 钮 ， 打 开 【 链 接 外 部 样式 表 】 对 话 框 ， 如 图 12-35 
所 示 。 单 击 【浏览 】 按钮， 链接 到 myAccordion.css 样式 文件 。 


图 12594 pr 图 12.35 链接 到 外 部 CSS 样式 表 


估 选择 【文件 】| 【保存 】 命 令 ， 按 F12 键 预览 页 面 。 在 左 侧 区 域 单 击 某 个 书籍 条 目 ， 
右 侧 将 显示 其 对 应 封面 、 内 容 简介 和 图 书 特色 。 内 容 简 介 和 图 书 特色 可 以 折 秋 显示 ， 如 图 
12-36 所 示 。 


jp 


图 12-36 ”预览 效果 


12.4.4 使 用 Spry 可 折 又 面板 


Spry 可 折合 面板 是 一 个 面板 ， 虽 然 只 有 一 个 面板 ， 但 仍然 可 以 展开 或 折 又 起 来 。 只 要 
将 鼠标 移 向 该 面板 的 选项 卡 ， 当 出 现 眼 睛 图 标 时 单 击 即 可 。 
在 属性 检查 器 中 ， 可 以 设置 预览 该 Spry 可 折合 面板 时 的 默认 状态 : 打开 或 者 已 关闭 。 


hao 
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选中 【启用 动画 】 复 选 框 , 则 Spry 可 折合 面板 在 打开 或 关闭 时 会 具有 动画 效果 , 如 图 12-37 
所 示 。 
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12-37 ”Spry 可 折 驹 面板 效果 


12.5 ”使 用 Spry 表单 控件 


Spry 表单 控件 用 于 验证 用 户 在 对 象 域 中 所 输入 的 内 容 是 否 为 有 效 数据 ， 并 在 这 些 对 象 
域 中 内 建 了 CSS 样式 和 JavaScript 特效 ， 更 加 丰富 了 对 象 域 的 显示 效果 。 下 面 我 们 将 继续 
第 8 章 设计 的 表单 ， 使 用 Spry 验证 控件 来 丰富 其 内 容 。 


12.5.1 使 用 Spry 验证 文本 域 控件 


Spry 验证 文本 域 控件 是 一 个 文本 域 ,用 于 在 站 点 访问 者 输入 文本 时 显示 文本 的 状态 (有 
效 或 无 效 )。 例 如 ， 用 户 可 以 向 访问 者 键入 电子 邮件 地 址 的 表单 中 添加 Spry 验证 文本 域 控 
件 ， 如 果 访 问 者 输入 的 电子 邮件 地 址 中 不 包含 “@” 和 “.” 符 号 ，Spry 验证 文本 域 控件 会 
返回 一 条 消息 ， 提 示 输 入 的 电子 邮件 地 址 无 效 。 

将 光标 置 于 表单 中 要 插入 Spry 验证 文本 域 控 件 的 位 置 ， 单 击 【 插 入 】 面 板 【Spry】 类 
别 下 的 【Spry 验证 文本 域 】 按 钮 下。 在 弹出 的 【输入 标签 辅助 功能 属性 】 对 话 框 中 将 【 标 
签 文字 】 设 置 为 “电子 邮件 : ”， 单 击 【确定 】 按 钮 。 表 单 中 将 出 现 插入 的 Spry 验证 文本 
域 对 象 ， 选中 标签 文本 ， 从 标签 选择 器 中 单 击 标签 <label>， 将 其 移 到 左 侧 表格 ， 如 图 12-38 
所 示 。 


Dreamweaver 中 的 Ajax 技术 。 
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图 12-38 插入 Spry 验证 文本 域 


Spry 验证 文本 域 有 许多 状态 : 有 效 、 无 效 、 必 有 需 值 等 ， 如 图 12-39 所 示 。 在 属性 检查 
器 中 (图 12-40 所 示 )， 用 户 首 先 需 要 选择 验证 的 类 型 ( 表 12-1 所 示 )， 然 后 再 对 验证 进行 详 
细 设 计 。 


有 效 关 太一 006 -05-240 到 Se 
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图 12-39 Spry 验证 文本 域 的 常见 状态 
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图 12-40 ”Spry 验证 文本 域 的 属性 检查 器 


【类 型 】: 选择 该 Spry 验证 文本 域 所 要 验证 的 类 型 。 

【预览 状态 】: 设置 Spry 验证 文本 域 控 件 在 预览 页 面 时 的 状态 , 提供 了 5 种 选择 。【 初 
始 】 状 态 为 在 浏览 器 中 加 载 页 面 或 用 户 重 置 表单 时 控件 的 状态 ; 【必需 】 状 态 为 当 用 户 在 
文本 域 中 没有 输入 必需 文本 时 控件 的 状态 ; 【有 效 】 状 态 为 当 用 户 正确 地 输入 信息 且 表 单 
可 以 被 提交 时 控件 的 状态 ; 【焦点 】 状 态 为 用 户 在 控件 中 放置 插入 点 时 控件 的 状态 ， 【无 
效 】 状 态 为 用 户 所 输入 的 文本 格式 无 效 时 控件 的 状态 。 

【验证 于 】: 设置 何 时 进行 验证 。【onBlur】 为 模糊 状态 ， 当 用 户 在 控件 外 部 单 击 、 
输入 内 容 或 尝试 提交 表单 时 验证 发 生 ; 【onChange】 为 更 改 状态 ， 当 用 户 更 改 文本 域 中 的 
内 容 时 验证 ， 【onSubmit】 为 提交 状态 ， 当 用 户 尝试 提交 表单 时 验证 。 

【最 小 字符 数 状态 】: 当 用 户 输入 的 字符 数 少 于 文本 域 所 要 求 的 最 小 字符 数 时 控件 的 
状态 。 

【最 大 字符 数 状态 】: 当 用 户 输入 的 字符 数 多 于 文本 域 所 允许 的 最 大 字符 数 时 控件 的 
状态 。 
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【最 小 值 状态 】: 当 用 户 输入 的 字符 数 小 于 文本 域 所 要 求 的 最 小 值 时 控件 的 状态 。 
【最 大 值 状态 】: 当 用 户 输入 的 字符 数 大 于 文本 域 所 要 求 的 最 大 值 时 控件 的 状态 。 
【强制 模式 】: 禁止 在 验证 文本 域 中 输入 无 效 字符 。 


Dreamweaver 中 的 Ajax 技术 。 


表 12-1 _Spry 验证 文本 域 控件 的 验证 类 型 
验证 类 型 说 明 
整数 仅 接 受 数字 
电子 邮件 地 址 ”| 接受 包含 @ 和 和 句点 的 电子 邮件 地 址 ， 而 且 @ 和 句点 的 前 面 、 后 面 都 至 少 有 一 个 字母 
日 期 接受 日 期 数据 ， 可 以 从 【格式 】 下 拉 列 表 框 中 选择 日 期 的 格式 
时 间 接受 时 间 数 据 ， 可 以 从 【格式 】 下 拉 列 表 框 中 选择 时 间 的 格式 
启用 卡 接受 所 有 信用 卡 ， 也 可 以 指定 特殊 种 类 的 信用 卡 ， 但 信用 卡号 中 不 能 包含 空格 
邮政 编码 接受 邮政 编码 ， 可 以 从 【格式 】 下 拉 列 表 框 中 选择 邮政 编码 的 格式 
电话 号 码 接受 电话 号 码 ， 用 户 可 以 自 定义 电话 号 码 格 式 ， 但 需要 在 【模式 】 文 本 框 中 指定 
社会 安全 号 码 ”| 接受 000-00-0000 格式 的 社会 安全 号 码 
货币 接受 1 000 000.00 或 1 000 000.00 格式 的 货币 
实数 /科学 计数 法 | 验证 各 种 数字 、 浮 点 值 
IP 地 址 接受 IP 地址， 可 以 从 【格式 】 下 拉 列 表 框 中 选择 IP 地 址 的 格式 
URL 接受 URL 网 址 
自 定义 可 指定 自 定义 验证 类 型 和 格式 


这 里 将 图 12-40 所 示 的 Spry 验证 文本 域 控件 的 【类 型 】 设 置 为 【电子 邮件 地 址 】， 将 
【预览 状态 】 设 置 为 【初始 】， 启 用 【onBlur】 验 证 方式 。 保 存 并 按 F12 键 预览 页 面 ， 输 
入 错误 的 电子 邮件 地 址 ， 页 面 提示 “格式 无 效 ”， 如 图 12-41 左 图 所 示 。 输 入 正确 的 电子 
邮件 地 址 ， 将 以 绿色 显示 ， 如 图 12-41 右 图 所 示 。 


您 使 用 本 书 是 作为 ， 
买 本 书 的 最 重要 因素 ， 
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用 户 可 以 在 【代码 】 视 图 中 修改 提示 信息 ， 


图 12-41 


页 面 预 览 效果 
例如 ， 将 “格式 无 效 ” 修 改 为 “电子 邮件 


格式 错误 ”， 如 图 12-42 所 示 。 


HN ] 
旦 作坊- 昼 扩 六 
天 本 地 区 时 重要 因素 ,| 
= | 


| SA 
| 


潜 寺 找 科 的 牢 座 ， 


图 12-42 ”修改 提示 信息 
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默认 的 Spry 验证 文本 域 控件 样式 都 是 Spry 框架 设置 好 的 ， 例 如 ， 错 误 消 息 以 红色 显 
示 ， 文 本 周围 有 一 个 像素 宽 的 边框 ， 以 及 控件 的 背景 颜色 等 。 要 更 改 验 证 文本 域 控件 错误 
消息 的 文本 样式 ， 请 使 用 表 12-2 在 【CSS 样式】 面板 中 查找 相应 的 CSS 规则 ， 然 后 更 改 
默认 属性 或 者 添加 自己 的 文本 样式 属性 和 值 。 


表 12-2 文本 样式 的 CSS 规则 
要 更 改 的 文本 相关 的 CSS 规则 要 更 改 的 相关 属性 
-textfieldRequiredState .textfieldRequiredMsg、 


.textfieldInvalidFormatState .textfieldInvalidFormatMsg、 
a .textfieldMinValueState .textfieldMinValueMsg、 color: #CC3333; 
错误 消息 文本 ' 
.textfieldMaxValueState .textfieldMaxValueMsg、 border: 1px solid #CC3333; 


.textfieldMinCharsState .textfieldMinCharsMsg 或 


:textfieldMaxCharsState .textfieldMaxCharsMsg 


要 更 改 处 于 各 种 状态 的 验证 文本 域 控件 的 背景 颜色 ， 请 使 用 表 12-3 在 【CSS 样式 】 面 
板 中 查找 相应 的 CSS 规则 ， 然 后 更 改 默认 的 背景 颜色 值 。 


表 12-3_ 背景 颜色 的 CSS 规则 


要 更 改 的 文本 相关 的 CSS 规则 要 更 改 的 相关 属性 
处 于 “有 效 ” 状 态 - background-color: 
.textfieldValidState input 或 input.textfieldValidState 
的 控件 的 背景 颜色 #B8F5B1; 


input.textfieldRequiredState、 
.textfieldRequiredState input、 
input.textfieldInvalidFormatState、 
.textfieldInvalidFormatState input、 
input.textfieldMinValueState、 
处 于 “无 效 ” 状 态 | .textfieldMinValueState input、 background-color: 
的 控件 的 背景 颜色 | input.textfieldMaxValueState、 #FEF9F9F: 
-textfieldMaxValueState Input、 
input.textfieldMinCharsState、 
-textfieldMinCharsState input、 
input.textfieldMaxCharsState 或 
-textfieldMaxCharsState input 

处 于 “焦点 ”状态 background-color: 

的 控件 的 背景 颜色 #FFFFCC:; 
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12.5.2 使 用 Spry 验证 文本 区 域 控件 


Spry 验证 文本 区 域 控件 是 一 个 文本 区 域 ， 该 区 域 在 用 户 输入 几 个 文本 句子 时 显示 文本 
的 状态 (有 效 或 无 效 )。 如 果 文 本 区 域 是 必 填 域 ， 而 用 户 没 有 输入 任何 文本 ， 那 么 该 控件 将 
返回 一 条 消息 ， 声 明 必 须 输入 值 。 

将 光标 置 于 表单 中 要 插入 Spry 验证 文本 区 域 控件 的 位 置 ， 单 击 【 插 入 】 面 板 【Spry】 
类 别 下 的 【Spry 验证 文本 区 域 】 按钮 国 。 在 弹出 的 【输入 标签 辅助 功能 属性 】 对 话 框 中 将 
【标签 文字 】 设 置 为 “您 对 我 们 的 建议 ，”, 单 击 【 确 定 】 按 钮 。 表单 中 将 出 现 插入 的 Spry 
验证 文本 区 域 对 象 , 选中 标签 文本 ， 从 标签 选择 器 中 单 击 标签 <label>, 将 其 移 到 左 侧 表格 。 

在 属性 检查 器 中 将 【预览 状态 】 设 置 为 【 必 填 】， 启 用 【OnBlur】 和 【字符 计数 】 复 
选 框 ， 以 便 提 示 访 问 者 已 经 输入 的 字符 数 或 者 还 可 以 再 输入 多 少 字 符 数 。 保 存 并 按 F12 键 
预览 页 面 ， 效 果 如 图 12-43 所 示 。 


Dreamweaver 中 的 Ajax 技术 。 
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12-43 页面 预览 效果 


当 用 户 输入 文本 内 容 时 ，Spry 验证 文本 区 域 以 黄色 显示 ， 并 在 文本 区 域外 显示 输入 字 
符 的 数目 。 当 文本 区 域内 无 任何 数据 时 ， 显 示 字 符 值 为 0， 并 提示 错误 信息 ， 文 本 区 域 背 
景 以 红色 显示 。 


12.5.3 ”使 用 Spry 验证 复 选 框 


Spry 验证 复 选 框 控件 是 HTML 表单 中 的 一 个 或 一 组 复 选 框 ， 该 复 选 框 在 用 户 选择 (或 
没有 选择 ) 复 选 框 时 会 显示 构件 的 状态 (有 效 或 无 效 )。 例 如 ， 可 以 向 表单 中 添加 Spry 验证 
复 选 框 控件 ， 该 表单 可 能 会 要 求 用 户 进行 三 项 选择 。 如 果 用 户 没有 进行 所 有 这 三 项 选择 ， 
该 控件 会 返回 一 条 消息 ， 声 明 不 符合 最 小 选择 数 要 求 。 

将 光标 置 于 表单 中 要 插入 Spry 验证 复 选 框 控 件 的 位 置 ， 在 【插入 】 面 板 的 【表单 】 类 
别 下 单 击 【字段 集 】 按 钮 ， 在 表单 中 插入 一 个 标签 为 “影响 您 购买 本 书 的 因素 ”的 字段 集 。 
然后 将 【文档 】 窗 口 切换 到 【 拆 分 】 视 图 ， 将 光标 置 于 标签 </fieldset> 之 前 ， 单 击 【Spry 
验证 复 选 框 】 按 钮 图， 将 标签 文字 设置 为 “ 书 名 ”， 效 果 如 图 12-44 所 示 。 

将 光标 置 于 Spry 验证 复 选 框 控件 中 的 “ 书 名 ” 复 选 框 后 ， 单 击 【 复 选 框 】 按 钮 ， 将 标 
签 文字 设置 为 “作者 名 声 ”， 接 着 添加 其 他 复 选 框 ， 如 图 12-45 所 示 。 

从 标签 选择 器 中 单 击 标签 <span#sprycheckbox1>， 选 择 Spry 验证 复 选 框 控件 及 其 包含 
的 所 有 复 选 框 。 在 属性 检查 器 中 ， 启 用 【强制 范围 】 复 选 框 ， 并 将 【最 小 选择 数 】 和 【最 
大 选择 数 】 分 别 设置 为 3 和 5， 最 后 启用 【OnBlur】 复 选 框 。 
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图 12-44 插入 Spry 验 证 复 选 框 控件 图 12-45 在 Spry 验 证 复 选 框 控件 添加 其 他 复 选 杠 


保存 并 预览 页 面 ， 启 用 一 个 复 选 框 ， 页 面 提示 “不 符合 最 小 选择 数 要 求 ”; 而 启用 6 


个 复 选 框 时 ， 则 提示 “已 超过 最 大 选择 数 ”， 如 图 12-46 所 示 。 


影响 您 购买 本 书 的 因素 ， 
园 书 名 回 作者 名 声 回 出 版 单位 固 封面 封底 目 装帧 设计 回 内 容 提要 、 前 言 回 价格 
朱 最 小 选 笃 概要 求 。 


影响 您 购买 本 书 的 因素 ， 
贺 书 名 园 作者 名 声 团 出 版 单位 园 封面 封底 团 装帧 设计 园 内 容 提要 、 前 言 加 
革 最 天 选择 数 。 


图 12-46 ”页面 预览 效果 


12.5.4 使 用 Spry 验证 选择 控件 


Spry 验证 选择 控件 是 一 个 下 拉 菜单 ,该 菜单 在 用 户 进行 选择 时 会 显示 控件 的 状态 (有 效 
或 无 效 )。 例 如 ， 可 以 插入 一 个 包含 状态 列表 的 Spry 验证 选择 控件 ， 这 些 状态 按 不 同 的 部 
分 组 合并 用 水 平 线 分 隔 。 如 果 访问 者 意外 选择 了 某 条 分 界线 ， 而 不 是 某 个 状态 ， 那 么 Spry 
验证 选择 控件 会 向 用 户 返回 一 条 消息 ， 声 明 它们 的 选择 无 效 。 

将 光标 置 于 表单 中 要 插入 Spry 验证 文本 区 域 控件 的 位 轩 ， 音 击 【插入 ] 面 权 【Spry] 
类 别 下 的 【Spry 验证 选择 】 按 钮 图 。 入 - = 
在 弹出 的 【输入 标签 辅助 功能 属性 】 
对 话 框 中 将 【标签 文字 】 设 置 为 “您 
使 用 本 书 是 作为 ， ”， 单 击 【确定 】 
按钮 。 表 单 中 将 出 现 插 入 的 Spry 验证 
文本 区 域 对 象 。 

在 插入 的 Spry 验证 选择 对 象 中 先 
中 菜单 对 象 , 在 属性 检查 器 中 单 击 【 列 
表 值 】 按 钮 。 然 后 在 打开 的 【列表 值 】 
对 话 框 中 单 击 【 添 加 】 按钮 , 添加 【项 图 12-47 添加 列表 项 
目标 签 】 及 其 对 应 【 值 】， 如 图 12-47 所 示 。 输 入 所 有 的 列表 值 后 ， 单 击 【 确 定 】 按 钮 。 

从 标签 选择 器 中 选中 标签 <span#spryselect1>， 在 Spry 验证 选择 对 象 的 属性 检查 器 中 ， 
启用 【 空 值 】 和 【无 效 值 】 复 选 框 ， 并 将 无 效 值 设置 为 - 1。 将 【预览 状态 】 设 置 为 【 初 
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书 的 因素 ， 
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*。 第 12 章 使 用 Spry 框架 一 Dreamweaver 中 的 Ajax 技术 。 


始 】， 启 用 【onBlur】 复 选 框 。 保 存 并 预览 页 面 ， 如 图 12-48 所 示 。 从 下 拉 列 表 框 中 选择 
【请 选择 】 选 项 时 ， 提 示 “ 请 选择 一 个 项 目 ” 信 息 ， 并 以 红色 背景 显示 ; 选择 具体 的 项 目 
后 ， 则 以 绿色 背景 显示 ;选择 分 隔 线 时 ， 则 提示 “请 选择 一 个 有 效 的 项 目 ” 信 息 。 
SR ” 情 选 泽 一 个 项目。 | 。 指定 斩 村 -Eee FT 
图 12-48 ”预览 Spry 验证 选择 控件 的 效果 
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12.6 应 用 Spry 效果 


Spry 效 果 是 Spry 框 架 提 供 的 视觉 增强 功能 ,可 以 将 它们 应 用 于 使 用 JavaScript 的 HTML 
页 面 上 几乎 所 有 的 元 素 。 例 如 ， 在 一 段 事件 内 高 亮 显示 信息 ， 创 建 动画 过 渡 或 者 以 可 视 方 
式 修改 页 面 元 素 等 。 

Spry 效果 可 以 从 【行为 】 面 板 中 获得 ， 如 表 12-4 所 示 。 由 于 这 些 效果 都 基于 Spry 框 
架 ， 因此， 当 用 户 单 击 应 用 了 Spry 效果 的 对 象 时 ， 只 有 该 对 象 会 进行 动态 更 新 ， 而 不 会 刷 
新 整个 页 面 。 


表 12-4 Spry 框架 提供 的 Spry 效果 


名 称 说 明 
显示 / 渐 隐 使 元 素 显示 或 渐 隐 
高 亮 颜色 更 改元 素 的 背景 颜色 
遮 帘 模拟 百叶 窗 ， 向 上 或 向 下 滚动 百叶 窗 来 隐藏 或 显示 元 素 
滑动 上 下 移动 元 素 
增 大 /收缩 使 元 素 变 大 或 变 小 
晃动 模拟 从 左 向 右 晃 动 元 素 
挤 压 使 元 素 从 页 面 的 左上 角 消 失 


全 spry 效果 和 Dreamweaver 的 标准 行为 有 何不 同 ? 
人 SS spry 效果 要 求 包含 在 外 部 文件 中 的 JavaSeript 函数 。 当 应 用 一 个 Spry 效果 时 ， 


Dreamweaver 会 在 【代码 】 视 图 中 将 不 同 的 代码 行 添加 到 网 页 文件 中 ， 其 中 的 一 行 代码 用 
来 标识 SpryEffects.js 文件 。 该 文件 是 使 用 Spry 效果 所 必需 的 。 在 发 布 站 点 时 ， 用 户 还 需 
要 将 这 些 文件 布置 到 您 的 远程 站 点 上 。 


下 面 的 例子 继续 例 12-4。 应 用 一 个 Spry 效果 高 亮 显 示 一 个 指定 的 元 素 , 并 通过 页 面 的 
加 载 触 发 这 种 效果 。 

例 12-5 为 页 面 元 素 应 用 Spry 效果 。 

各 打开 例 12-4 保存 的 页 面 final2.html， 选 择 【 文 件 】| 【另存 为 】〗 命 令 ， 将 页 面 
为 final3.html。 

加 将 【文档 】 窗 口 切换 到 【 拆 分 】 视 图 ， 将 光标 定位 到 left DIV 容器 中 图 12-49 所 示 


另存 


Dw a a 
Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


位 置 ， 即 Spry 表格 的 前 面 。 单 击 【 插 入 】 面 板 【 布 局 】 类 别 下 的 【插入 Div 标签 】 按 钮 ， 
将 新 的 Div 容器 命名 为 effect。 

各 删除 effect Div 标签 的 文本 占 位 符 内 容 , 输入 “重点 图 书 推荐 ”, 然后 选中 该 文本 ， 
在 属性 检查 器 中 将 【格式 】 设 置 为 【标题 2】。 

入 从 标签 选择 器 中 选中 <body.oneColFixCtr> 标 签 ， 然 后 选择 【窗口 】|【 行 为】 命令 ， 
打开 【行为 】 面 板 。 

加 单 击 【 添 加 行为 】 按 钮 ， 然 后 从 下 拉 菜单 中 选择 【效果 】|【 高 亮 颜色 】 命 令 ， 打 
开 【 高 亮 颜色 】 对 话 框 。 
各 从 【目标 元 素 】 下 拉 列 表 中 选择 【div“effect”】, 将 【效果 持续 时 间 】 设 置 为 3000 
毫秒 , 将 【起 始 颜 色 】 设 置 为 丁 FFFFF， 将 【结束 颜色 】 设 置 为 #669933， 将 【应 用 效果 后 
的 颜色 】 设 置 为 #669933， 如 图 12-50 所 示 ， 单 击 【 确 定 】 按 钮 。 
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图 12-49 插入 effect Div 容器 图 12-50 设置 “高 亮 颜 色 ” 参 数 


名 保存 并 预览 页 面 。 可 以 发 现 ,在 页 面 加 载 完毕 后 ,标题 后 面 的 颜色 会 淡 入 ,并 最 终 
停留 到 该 状态 ， 如 图 12-51 所 示 。 用 户 可 以 刷新 页 面 来 回顾 该 过 程 。 


图 12-51 预览 背景 颜色 的 淡 入 过 程 


本 章 小 结 
在 Web 2.0 的 世界 里 ， 页 面 可 以 使 用 XML 数据 来 更 新 ， 而 不 用 重新 加 载 整 个 页 面 ， 


这 给 访客 带 来 了 更 好 的 浏览 体验 。Dreamweaver CS4 提供 了 Spry 框架 ,可 以 帮助 网 页 制作 
人 员 以 可 视 化 的 方式 制作 Ajax 页 面 ， 而 无 需 大 量 编码 。 本 章 对 Spry 框架 中 的 工具 分 类 进 


has_ 


， 第 12 章 使 用 Spry 框架 一 Dreamweaver 中 的 Ajax 技术 。 


行 了 介绍 ， 贯 穿 本 章 的 是 一 个 相对 完整 的 例子 。 通 过 对 本 章 的 学 习 ， 读 者 除了 可 以 掌握 各 
个 Spry 控件 的 作用 和 用 法 外 ， 还 应 该 学 会 如 何在 页 面 中 合理 地 使 用 它们 。 


习 题 


填空 题 
1. Web 2.0 时 代 的 核心 技术 便 是 Ajax， 即 异步 和 
. 每 一 个 Spry 控件 都 由 3 部 分 组 成 : 控件 结构 、 和 
. XML， 即 ， 已 经 成 为 Web 上 存储 和 维护 数据 的 标准 格式 。 
. 要 在 网 页 中 使 用 XML 文档 中 的 数据 ， 就 必须 首先 标识 包含 数据 的 XML 源 文件 ， 即 创建 。 
.Spry 框架 使 用 两 种 类 型 的 区 域 : 一 种 是 围绕 的 Spry 区 域 ， 另 一 种 是 ， 该 区 域 与 主 
表格 对 象 一 起 使 用 时 ， 可 允许 对 Dreamweaver 页 面 上 的 数据 进行 动态 更 新 。 
6. 控件 用 于 验证 用 户 在 对 象 域 中 所 输入 的 内 容 是 否 为 有 效 数据 ， 并 在 这 些 对 象 域 中 内 建 了 CSS 
样式 和 JavaScript 特效 ， 更 加 丰富 了 对 象 域 的 显示 效果 。 
光 是 Spry 框架 提供 的 视觉 增强 功能 ， 可 以 将 它们 应 用 于 使 用 JavaScript 的 HTML 页 面 上 几乎 
所 有 的 元 素 。 
选择 题 
8. 所 有 的 Spry 数据 对 象 都 必须 位 于 ( ”) 中 。 
A. Spry 布局 控件 B. Spry 区 域 控件 C. Spry 表格 控件 D. Spry 选项 卡 面板 
9. 如 果 要 验证 访客 输入 的 电子 邮件 地 址 格式 是 否 有 效 ， 应 使 用 ( ”) 控 件 。 
A. Spry 验证 文本 域 ”B. Spry 验证 文本 区 域 C. Spry 验证 复 选 框 ” D. Spry 验证 选择 
简 答 题 
10. Ajax 页 面 和 普通 的 网 页 有 何 区 别 ? 
11. Spry 效果 和 标准 的 Dreamweaver 行为 有 何 区 别 ? 
上 机 操作 题 
12. 参考 例 12-1、12-2、12-4、12-5 制作 一 个 Ajax 页 面 ， 介 绍 各 个 品牌 的 汽车 。 主 Spry 表格 列 出 汽车 的 
型 号 、 上 市 时 间 、 价 格 。Spry 详细 区 域 的 图 像 占 位 符 部 分 展示 汽车 图 片 ， 下 方 是 该 车 的 简要 介绍 ， 
以 及 生产 厂家 的 介绍 。 
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13.1 ”制作 网 页 “ 沁 园 春 ” 


兢 实 训 目标 

学 会 基于 Dreamweaver 提供 的 CSS 布局 来 设计 页 面 , 在 制作 网 页 的 过 程 中 ,掌握 在 网 
页 中 添加 文本 、AP Div 标签 的 方法 ， 以 及 CSS 样式 的 创建 和 修改 方法 。 
器 实 训 内 容 


首先 创建 一 个 网 页 文档 ， 然 后 修改 页 面 的 Div 布局 标签 的 样式 ， 设 置 背景 图 像 。 最 后 
在 页 面 中 添加 文本 内 容 并 设计 文本 样式 ， 最 后 的 制作 结果 如 图 13-1 所 示 。 


图 13-1 “ 沁 园 春 ” 页 面 效果 


由 上 机 操作 详解 

你 启动 Dreamweaver CS4， 选 择 【 文 件 】|【 新 建 】 命 令 ， 打 开 【 新 建文 档 】 对 话 框 。 
在 【空白 页 】 下 单 击 【HTML 模板 】 页 面 类 别 ， 然 后 在 【布局 】 列 表 中 选中 【 列 固 定 ， 居 
中 ,标题 和 脚注 】 选 项 ， 单 击 【 创 建 〗 按 钮 。 

称 【文档 】 窗 口中 将 基于 该 CSS 布局 来 创建 页 面 。 选择 【窗口 】| 【CSS 样式 】 命 令 ， 


“第 13 章 实 训 ， 


打开 【CSS 样式 】 面 板 。 

加 在 【全 部 】 样 式 规则 下 单 击 选中 【.oneColFixCtrHdr #beader】 样 式 规则 ， 在 属性 列 
表 中 分 别 选中 background-color 和 padding 属性 ， 按 Delete 键 将 它们 删除 。 然 后 单 击 【 添 
加 属性 】 链 接 ， 添 加 background-image 属性 并 设置 值 ， 将 重复 方式 设置 为 横向 重复 ， 最 后 
添加 height 属性 ， 值 设置 为 55px， 如 图 13-2 所 示 。 


主要 内 容 
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13-2 ”修改 .oneColFixCtrHdr #header 样式 规则 


从 用 同样 的 方法 修改 【.oneColFixCtrHdr #footer】 样式 规则 ， 唯 一 不 同 的 是 背景 图 片 
不 一 样 。 返 回 【 文 档 】 窗 口 ， 清 除 页 面 中 的 所 有 标题 占 位 符 和 文本 占 位 符 内 容 (连同 标签 ， 
如 <hl> 等 )。 得 到 的 结果 如 图 13-3 所 示 。 


图 13-3 ”清除 页 面 中 所 有 的 占 位 符 及 内 容 


加 在 【Css 样式】 面板 中 选中 【.oneColFixCtrHdr #content】 样 式 规则 ， 为 其 添加 属 
性 height， 值 为 500 像素 。 这 样 页 面 中 便 产 生 了 设计 页 面 内 容 的 空间 。 分 别 选 中 
【.oneColFixCtrHdr #header hl1】〗 和 【.oneColFixCtrHdr #footer p】 样 式 规则 ， 按 Delete 键 将 
这 些 无 用 的 规则 删除 。 

人 @ 在 【Css 样式】 面板 中 选中 【body】 样 式 规则 ， 在 属性 列表 中 将 【color】 属 性 设 
置 为 的 9acff， 以 统一 页 面 中 所 有 正文 字体 的 颜色 。 

他 将 【插入 】 面 板 切换 到 【布局 】 类 别 ， 单 击 【 插 入 AP Div】 按 钮 ， 在 页 面 中 间 位 
置 插入 一 个 AP Div 容器 , 调整 好 容器 的 大 小 , 在 其 中 输入 词 “ 沁 园 春 ” 的 内 容 , 如 图 13-4 
所 示 。 


来 来 来 沈 园 春来 来 来 


大 ， 黄 沙弥 温 ， 王侯 霸业 , 转瞬 妆 
, 保 得 三 身 


图 13-4 输入 词 的 内 容 
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@@ 选中 标题 “* * * 沁 园 春 * * * ”， 在 属性 检查 器 中 从 【格式 】 下 拉 列 表 框 中 选择 
【标题 1】 。 

和 单 击 【 页 面 属性 】 按 钮 ， 打 开 【 页 面 属性 】 对 话 框 。 在 【外 观 】 分 类 下 设置 页 面 的 
【背景 图 像 】 ， 最 后 保存 并 预览 页 面 ， 即 可 得 到 图 13-1 所 示 的 效果 。 


13.2 ”规划 并 创建 网 站 “谜底 女装 ” 


窗 实 训 目标 

了 解 应 该 如 何 规划 站 点 结构 ， 收 集 并 设计 网 站 素材 ， 创 建 Dreamweaver 本 地 站 点 。 
嘱 实 训 内 容 

“谜底 女装 ”是 一 个 女装 品牌 ， 其 客户 主要 针对 都 市 中 25~35 岁 的 、 追 求 自由 和 个 性 
的 知识 女性 。 因 而 ， 网 站 整体 的 风格 既 要 要 符合 时 尚 、 先 锋 、 前 卫 的 特点 ， 又 要 能 体现 本 


品牌 的 特色 ， 要 十 分 注意 细节 方面 的 处 理 。 本 节 首 先 规 划 网 站 的 结构 ， 然 后 收集 并 整理 相 
关 的 图 像 、Flash 动画 等 素材 ， 最 后 使 用 Dreamweaver 创建 本 地 站 点 。 


器 上 机 操作 详解 

人 @@ “谜底 女装 ”的 网 站 内 容 分 “首页 ”、“ 走 进 猜 想 ”、“ 新 闻 中 心 ”、“ 产 品 展示 ”、 
“特许 加 盟 ”、“ 营 销 网 络 ”、“ 客 服 专区 ”、“ 招 贤 纳 士 ”、“ 联 系 我 们 ”这 几 个 栏目 。 
当 浏 览 者 打开 本 网 站 时 ， 应 首先 进入 的 是 站 点 的 首页 Index.html。 单 击 “Enter 直接 进入 ” 


图 像 后 进入 “ 走 进 猜想 ”栏目 ， 单 击 栏目 中 的 导航 文本 则 分 别 进入 各 栏目 网 页 ， 如 图 13-5 
所 示 。 


首页 (index.htm)D) 


走 进 猜 想 || 新 闻 中 心 ‖ 产品 展示 || 特许 加 盟 || 营销 网 络 || 客服 专区 || 招贤 纳 士 上 | 联系 我 们 
(about.htmD)|| (ews.htmD) ||(produ.htmD||(partner html |(martk.htmD)| |(custom.html| (Qob.html) | (contact.htn 
图 13-5 网 站 的 导航 图 


加 网 站 规划 好 后 ,就 需要 收集 、 制作 并 整理 相关 的 素材 。 可 收集 产品 的 图 片 、 公 司 信 
息 等 ， 并 使 用 Photoshop 根据 网 页 需要 进行 大 小 和 效果 上 的 处 理 。 在 本 地 计算 机 创建 “ 谜 
底 女 装 ” 文 件 夹 ， 并 在 该 文件 夹 下 创建 “Flash”、“images” 等 文件 夹 ， 在 其 中 保存 收集 
并 制作 好 的 素材 。 


hez 
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科 下 面 来 创建 Dreamweaver 本 地 站 点 。 启 动 Dreamweaver CS4， 选择 【 站 点 】| 【新 
建站 点 】 命 令 ， 打开 【站 点 定义 】〗 向 导 。 

入 切换 到 【基本 信息 】 选 项 卡 ， 将 站 点 命名 为 “谜底 女装 ”， 如 图 13-6 所 示 。 

加 单 击 【 下 一 步 】 按 钮 ， 由 于 该 站 点 是 一 个 静态 站 点 ， 所 以 选择 【和 否 ， 我 不 想 使 用 服 
务 器 技术 】 单 选 按钮 ， 如 图 13-7 所 示 。 


和 EE 于 和 上 竺 10 估 
TRA 忆 读 慎 作 移 示 


[oi] 
FM Wri 


ee ETF 妃 相 00] 蜡 什 之 1 
pe We Hem wp csite 多半 开 1] 闻 抽 90 虽 玉 尖 入 相 ,如 cikeim .An TT 57 EP 拒 TE 和 
Ee 吕 丙 ， 本 于 na 
图 13-6 对 站 点 命名 图 13-7 选择 是 否 使 用 服务 器 技术 


名 单 击 【 下 一 步 】 按 钮 , 选中 【编辑 我 的 计算 机 上 的 本 地 副本 ,完成 后 再 上 传 到 服务 
器 】 单 选 按钮 。 单 击 下 方 文本 框 右 侧 的 【浏览 】 按 钮 ， 将 站 点 存储 位 置 指 定 为 步骤 图 建立 
的 “谜底 女装 ”文件 夹 ， 如 图 13-8 所 示 。 

食 单 击 【下 一 步 】 按 钮 ， 在 【您 如 何 连接 到 远程 服务 器 】 下 拉 列 表 框 中 选择 【无 】 选 
项 ， 如 图 13-9 所 示 。 


在 Wh， 


机 本 村 的 计划 HL 下 性 乔 不 ， 六 区 后 而 上 亿 303 天 阁下 
站 本 1 好 3 六 副 拉 有 间 备 可 上 过 和 和 用 0 


全 有 拓 放 亲 贿 在 半 世 机 上 3H 和 5B? 
人 


13-8 ”选择 网 站 的 开发 方式 和 存储 位 置 13-9 ”选择 暂时 不 使 用 远程 服务 器 
@@ 单 击 【下 一 步 】 按 钮 ,预览 站 点 的 设置 ， 如 图 13-10 所 示 。 如 果 有 误 ， 可 单 击 【 上 
一 步 】 按 钮 ， 返 回 前 面 步 又 重新 设置 。 单 击 【完成 】 按 钮 ， 完 成 “谜底 女装 ”本 地 站 点 的 
创建 。 


站 富 以 下 妈 查 


直人 和 
站 占 匀 称 、 汪 放大 著 
本 博 各 六 全 大 -人 本 夫 志 的 交 首 ww wkiDrewmewwwr C353 各 而 设计 与 合演 包 填 汐 儿 


证 生 位 育 - 
而 间 :我 贞 在 日 后 元 或 此 过 再 。 


于 昌 才 本 - 
而 辣 、 我 语 在 及 后 寺 或 此 这 吐 * 
司 碎 基 草 有 这 | 而 下 对 全 9 点 放行 这 一 卡 EE。 


图 13-10 总 结 站 点 信息 
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13.3 ”制作 网 站 “谜底 女装 ”的 首页 


器 实 训 目标 

能 够 从 一 个 空白 网 页 开始 ， 设 计 页 面 的 布局 ， 同 时 练习 在 页 面 中 插入 图 像 和 Flash 动 
画 ， 以 及 设置 超级 链接 。 
器 实 训 内 容 

首先 创建 一 个 空白 的 HTML 网 页 ， 然 后 使 用 Div 容器 对 页 面 进行 布局 ， 最 后 在 各 个 


Div 容器 中 插入 图 像 和 Flash 动画 ， 并 设置 到 “谜底 猜想 ”栏目 的 超级 链接 ， 得 到 的 效果 如 
图 13-11 所 示 。 


图 13-11 “谜底 女装 ”首页 欣赏 


器 上 机 操作 详解 


入 选择 【窗口 1 | 【文件 】 命 令 ， 打开 【 文 件 】 面 板 。 

@@ 在 面板 顶部 的 下 拉 列 表 框 中 选择 “谜底 女装 ”站 点 , 在 右 侧 将 视图 模式 设置 为 “本 
地 视图 ”。 

加 右 击 “站 点 -谜底 女装 ”文件 夹 ， 从 弹出 菜单 中 选择 【新 建文 件 】 命 令 。“ 站 点 - 
谜底 女装 ”文件 夹 下 将 出 现 一 个 未 命名 的 HTML 网 页 文档 ， 将 其 重 命名 为 “index.html”。 

@@ 双击 index.html 文件 , 在 【文档 】 窗 口中 打开 它 。 下 面 首先 来 设计 后 面 所 需 的 CSS 
样式 规则 。 选 择 【 窗 口 】|【CSS 样式 】 命 令 ， 打 开 【CSS 样式 】 面 板 。 

加 单 击 面板 右 下 角 的 【新 建 CSS 规则 】 按 钮 ， 打 开 【 新 建 CSS 规则 】 对 话 框 。 将 选 
择 器 类 型 设置 为 【ID】， 将 选择 器 命名 为 “.oneColFixCtr #eontainer”， 定 义 规则 的 位 置 设 
置 为 【 仅 限 该 文档 】 ， 如 图 13-12 左 图 所 示 ， 单 击 【 确 定 】 按 钮 。 

人 @ 在 打开 的 【Css 规则 定义 】 对 话 框 中 ， 在 【区 块 】 类 别 下 ,将 【文本 对 齐 】 方 式 
设置 为 【 左 对 齐 】; 在 【 方 框 】 类 别 下 , 将 【 宽 】 和 【高 】 设 置 为 100%， 如 图 13-12 右 图 
所 示 。 


hea_ 


尺 03 规 央 记 头 上 下 文臣 主攻 沪 弄 
edFSEr srcrtaner ND Cr MN 


[onaR tr mm eR | 
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图 13-12 定义 #container 样式 规则 


和食 用 同样 的 方法 创建 .oneColFixCtr #top、 .oneColFixCtr #content、 .oneColFixCtr #footer 
样式 规则 ， 代 码 如 下 : 


.oneColFixCtr #top { 
height: 110px; 
width: 1001px; 
Eext=aLigqns Left 
} 
.OneColFixCtr #content { 
height: 434px; 
width: 1001px; 
} 
.oneColFixCtr #footer { 
height: 186px; 
width: 1001px; 
. 
人 @ 在 属性 检查 器 中 单 击 【 页 面 属性 】 按 钮 ,打开 【页 面 属性 】 对 话 框 。 在 【外 观 】 类 


别 下 将 【背景 颜色 】 设 置 为 此 82001， 如 图 13-13 所 示 。 


ea ri me mr 
nh tte -区 > 

). 机 | wm 

,| wi 


图 13-13 ”设计 网 页 属性 ( 即 body 样式 规则 ) 


人 @ 将 【文档 】 窗 口 切 换 到 【代码 】 视 图 ， 在 <body> 标 签 中 添加 代码 


‘class="oneColFixCtr"” 。 
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罗 将 光标 置 于 <body> 标 签 后 , 单 击 【插入 】 面 板 【 布 局 】 类 别 下 的 【插入 Div】 按钮 ， 
在 【ID】 列 表 中 选择 【container】 ， 如 图 13-14 所 示 ， 单 击 【 确 定 】 按 钮 。 


图 13-14 插入 container Div 容器 


全 将 光标 置 于 container Div 容器 中 ,用 同步 骤 食 所 示 的 方法 在 该 容器 中 依次 插入 top、 
content 和 footer Div 容器 ，【 代 码 】 视 图 和 【设计 】 视 图 中 的 结果 如 图 13-15 和 13-16 所 示 。 


/ME_BumacttYeContenty]5”5yBen 


图 13-15 插入 top、content 和 footer Div 13-16 插入 top、content 和 footer Div 
容器 代码 容器 后 的 结果 


估 在 【设计 】 视 图 中 分 别 删除 container、top、content、footer Div 容器 的 文本 占 位 符 。 
首先 借助 【 拆 分】 视图 ， 将 光标 置 于 top 容器 中 , 单 击 【插入 】 面 板 【 常 用 】 类 别 下 的 【图 像 】 
按钮 组 ,从 下 拉 选 项 中 单 击 【图 像 】, 在 top 容器 中 插入 事先 制作 好 的 图 像 ， 如 图 13-17 所 示 。 

村 将 光标 置 于 content 容器 中 ， 单 击 【 媒 体 】 按 钮 组 ， 从 下 拉 选 项 中 单 击 【SWF】 选 
， 在 content 下 sas Flash 动画 ， 如 图 13-18 所 示 。 


ET 
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13-17 插入 图 像 图 13-18 插入 Flash 动画 


hse 
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侈 用 同步 又 办 所 示 的 方法 在 footer 容器 中 插入 事先 制作 好 的 图 像 ， 此 时 【文档 】 窗 口 
的 【设计 】 视 图 如 图 13-19 所 示 。 


图 13-19 页 面 的 结果 


倪 选中 footer 容器 中 的 图 像 ， 在 属性 检查 器 的 地 图 绘制 中 单 击 【绘制 矩形 热点 工具 】 
按钮 回 ,在 图 像 中 绘制 矩形 特点 区 域 。 单 击 【 指 针 热点 工具 】 按 钮 攻 )， 移 动 矩形 热点 区 域 
到 图 像 的 “Enter 直接 进入 ”文字 上 方 ， 调 整 热点 区 域 大 小 使 其 覆盖 这 段 文字 ， 如 图 13-20 
左 图 所 示 。 

人 @ 选中 矩形 热点 区 域 ， 在 属性 检查 器 中 将 【链接 】 目 标 设置 为 about html 页 面 ,如 图 
13-20 右 图 所 示 。 保 存 并 预览 页 面 ， 即 可 得 到 图 13-11 所 示 的 效果 。 

se 
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13-20 通过 矩形 图 像 热 点 区 域 链接 到 “谜底 猜想 ”页 面 


13.4 制作 网 站 “谜底 女装 ”的 “谜底 猜想 ”页 面 


路 实 训 目 标 
练习 AP Div 布局 标签 的 用 法 并 掌握 CSS 样式 的 修改 方法 。 
器 实 训 内 容 


基于 index.html 页 面 来 创建 about.html 页 面 , 但 需要 更 改 CSS 样式 以 及 图 像 、Flash 动 
画 等 元 素 ， 还 需要 添加 一 个 AP Div 标签 ,用 于 容纳 页 面 的 导航 栏 ， 得 到 的 效果 如 图 13-21 
所 示 。 
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图 13-21 “谜底 女装 ”首页 效果 


器 上 机 操作 详解 


入 在 【文件 】 面 板 中 选中 文件 index.html， 按 Ctrl+C 键 对 其 复制 ， 然 后 按 CtrltV 键 
粘贴 。“ 站 点 -谜底 女装 ”下 将 出 现 复制 的 文档 ， 将 其 重新 命名 为 about.html。 

加 双击 about.html， 在 【文档 】 窗 口中 打开 它 。 

加 在 【Css 样式 】 面 板 中 单 击 【全 部 】 标 签 ， 打 开 页 面 的 所 有 CSS 规则 。 

@@ 单 击 【.oneColFixCtr #top】 样 式 规则 ， 在 属性 列表 中 将 【height】 更 改 为 107px。 
同样 的 方法 将 【.oneColFixCtr #content】〗 和 【.oneColFixCtr #tooter】 的 【height】 更 改 为 
434px 和 89px。 
人 @ 在 【文档 】 窗 口中 双击 top 容器 中 的 图 像 ， 重 新 打开 【选择 图 像 源 文件 】 对 话 框 ， 
将 要 插入 的 图 像 更 改 为 top_bg.jpg。 用 同样 的 方法 将 footer 中 的 图 像 更 改 为 Co_buttom.jpg。 

加 双击 content 容器 中 的 Flash 动画 ,重新 打开 【选择 Flash 文件 】 对 话 框 ， 更改 要 插 
入 的 Flash 动画 为 index.swf。 此 时 【文档 】〗 窗 口 的 【设计 】 视 图 如 图 13-22 所 示 。 
加 | 


图 13-22 页面 修改 后 的 结果 


hos 
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各 在 top 容器 中 绘制 一 个 AP Div 容器 ， 在 属性 检查 器 中 将 容器 大 小 设置 为 680X 69 
像素 ， 调 整 好 AP Div 的 位 置 ， 如 图 13-23 所 示 。 


全 将 光标 置 于 AP Div 容器 中 ， 单 击 【媒体 】 按 钮 组 ， 从 下 拉 选 项 中 单 击 【SWF】， 
在 content 容器 中 插入 事先 制作 好 的 用 于 页 面 导航 的 Flash 动画 “menu.swf 。 为 了 使 该 Flash 
动画 的 背景 透明 , 单 击 属性 检查 器 中 的 【参数 】 按 钮 , 在 打开 的 对 话 框 中 添加 wmode 参数 ， 
并 将 值 设置 为 transparent。 

人 @ 保存 并 预览 页 面 ， 即 可 得 到 图 13-21 所 示 的 效果 。 


13.5 ”制作 网 站 “谜底 女装 ”的 “新 闻 中 心 ” 栏 目 


13-23 在 top 容器 中 插入 AP Div 


器 实 训 目标 


练习 创建 模板 并 设置 可 编辑 区 域 ， 练 习 Dreamweaver 的 鼠标 经 过 图 像 交互 行为 ， 以 及 
表格 、 项 目 列表 的 用 法 。 


器 实 训 内 容 


首先 将 about.html 另存 为 模板 ,并 设置 可 编辑 区 域 。 然 后 基于 模板 创建 news.html 页 面 ， 
并 编辑 页 面 内 容 。 制 作 好 的 栏目 首页 如 图 13-24 所 示 。 


图 13-24 制作 好 的 栏目 页 面 


首次 打开 页 面 时 ， 页 面 中 间 区 域 左 右 两 侧 是 Flash 动画 ， 新 闻 分 “公司 动态 ”和 “ 行 
业 资 讯 ” 两 类 。 可 将 鼠标 移 到 按钮 上 ， 按 钮 形状 将 改变 ， 单 击 可 在 下 方 的 列表 中 查看 具体 
新 闻 信息 列表 。 
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@@ 首先 来 创建 模板 。 在 【文件 】 面 板 的 “站 点 -谜底 女装 ” 根 目录 下 双击 abouthtml 
文件 ， 在 【文档 】 窗 口中 打开 它 。 

和 @@ 选择 【文件 】|【 另 存 为 模板 】 命 令 ， 打 开 【 另 存 模板 】 对 话 框 ， 在 【另存 为 】 文 
本 框 中 输入 模板 名 称 ， 并 设置 模板 的 描述 信息 ， 如 图 13-25 所 示 ， 单 击 【 确 定 】 按 钮 。 

加 将 光标 置 于 content 容器 中 ， 从 标签 选择 器 中 单 击 <div#kcontent> 标 签 。 在 【插入 】 
面板 【常用 】 类 别 下 单 击 【 模 板 : 可 编辑 的 可 选区 域 】 按 钮 加]， 打 开 【 新 建 可 选区 域 】 


对 话 框 ， 将 可 编辑 区 域 命名 为 “main”， 如 图 13-26 所 示 ， 单 击 【确定 】 按 钮 。 


图 13-25 将 页 面 男 存 为 模板 图 13-26 命名 模板 中 的 可 编辑 区 域 


入 选择 【文件 】| 【新 建 】 命 令 ， 打开 【新 建文 档 】 对 话 框 。 单 击 【 模 板 中 的 页 】 选 
项 ,在 【站 点 】〗 列 表 中 单 击 【谜底 女装 〗” 站 点 ， 从 右 侧 的 模板 列表 中 选中 【main】〗”， 如 图 
13-27 所 示 。 


13-27 基于 模板 新 建 网 页 


加 单 击 【 创 建 】 按钮，【 文 档 】 窗 口中 出 现 基于 该 模板 创建 的 网 页 。 选 择 【 文 件 】| 
【保存 】 命 令 ， 将 页 面 命名 为 news.html， 存 储 在 “谜底 女装 ”站 点 根 目录 下 。 
人 @ 下 面 首先 来 创建 CSS 样式 ， 它 们 用 于 对 Div 标签 布局 。 代 码 如 下 : 


.oneColFixCtrContentLeft { 


background-image: url (images/N banner.jpg); 
width: 315px; 


boo_ 


Loat: Left 

) 

-oneColFixCtrContentMiddle { 
width: 343pxr 
float: left; 
color: #693e25; 

3 

.oneColFixCtrContentRight { 
background-image: url (images/Ne picl.jpg); 
width: 343px; 
floats Lefts 

} 


站 返回 【文档 】 窗 口 ， 选 中 content 容器 中 的 Flash 动画 ， 按 Delete 键 将 其 删除 ， 此 
时 页 面 如 图 13-28 所 示 。 
了 


Je JR 


13-28 ”删除 content 容器 中 的 Flash 动画 


全 将 【文档 】 窗 口 切换 到 【 拆 分 】 视 图 ， 将 光标 置 于 content Div 容器 中 。 用 13.3 节 
步骤 加 的 方法 在 content 容器 中 依次 插入 oneColFixCtrContentLeft 、 
oneColFixCtrContentMiddle 和 oneColFixCtrContentRight 标签 ， 结 果 如 图 13-29 所 示 。 


图 13-29 在 页 面 中 插入 Div 布局 标签 


人 @ 分 别 删除 这 3 个 Div 标签 中 的 文本 占 位 符 。 利 用 【 拆 分】 视图 ， 分 别 在 
oneColFixCtrContentLeft 和 oneColFixCtrContentRight 容器 中 插入 Flash 动画 文件 N_leftswf 
和 N_right.swf。 
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罗 选中 插入 其 中 的 一 个 Flash 动画 ， 从 标签 选择 器 中 单 击 标签 <noseript>， 在 属性 检 
查 器 中 单 击 【 左 对 齐 】〗 按 钮 ， 使 该 Flash 动画 对 齐 到 其 所 在 Div 容器 的 左 侧 。 用 同样 的 方 
法 修改 另 一 个 插入 的 Flash 动画 。 按 F12 键 预览 页 面 ， 结 果 应 该 如 图 13-30 所 示 。 


图 13-30 ”在 content 的 左右 两 个 Div 容器 中 分 别 插入 Flash 动画 


了 @ 下 面 来 设计 content 中 间 Div 容器 中 的 内 容 。 这 里 要 使 用 表格 。 将 光标 置 于 
oneColFixCtrContentMiddle 容器 中 。 单 击 【 插 入 】 面 板 【 常 用 】 类 别 下 的 【表格 】 按 钮 ， 
打开 【表格 】 对 话 框 。 插 入 一 个 5 行 1 列 的 表格 ， 如 图 13-31 所 示 。 


惠 格 大 人 


性 六 :5 ED 
机 收 宽 届 :|100 中 百 轨 比 “aw] 


13-31 在 oneColFixCtrContentMiddle 中 插入 表格 


注意 : 读者 可 能 注意 到 ，【 设 计 】 视 图 中 各 个 Div 容器 的 位 置 并 非 如 我 们 所 设置 的 一 
致 。 这 主要 是 因为 Dreamweaver CS4 程序 本 身 要 占据 一 定 的 屏幕 空间 ， 无 法 按 1024 像素 
的 宽度 显示 所 致 ， 预 览 时 会 正常 显示 ， 读 者 不 用 担心 。 

四 将 光标 置 于 第 一 行 单元 格 中 , 在 属性 检查 器 中 单 击 【 背 景 】 文 本 框 右 侧 的 浏览 按钮 ， 
将 单元 格 的 背景 设置 为 图 片 N_titlel.jpg。 切 换 到 【 拆 分 】 视 图 ， 将 单元 格 的 【height】 属 
性 设置 为 134 像素 。 修 改 <table> 标 签 中 的 属性 设置 ， 如 图 13-32 所 示 。 


boz 
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图 13-32 ”设置 单元 格 高 度 和 背景 


提示 : 代码 “cellspacing="0" cellpadding="0"” 的 作用 是 将 表格 中 单元 格 之 间 的 边框 
及 填充 设置 为 0。 许 多 情况 下 ，Dreamweaver 默认 单元 格 之 间 有 边框 ， 如 果 希 望 消除 这 些 
边框 ， 则 需要 我 们 手动 来 修改 。 

估 用 同样 的 方法 将 第 2.3、4、5 行 单元 格 的 背景 图 像 分 别 设置 为 N_bsg2.jpg\N_line.jpg、 
N_bg2.jpg、N_bg3.jpg。【height】 属 性 分 别 设置 为 30、23、104、134， 得 到 的 结果 如 图 
13-33 所 示 。 

民 将 光标 置 于 第 2 行 单元 格 中 , 单 击 【 插 入 】 面 板 的 【常用 】 类 别 下 的 【图 像 : 鼠标 
经 过 图 像 】 按 钮 ,打开 【插入 鼠标 经 过 图 像 】 对 话 框 ,设置 图 像 名 称 、 原 始 图 像 、 和 鼠标 经 
过 图 像 ， 以 及 按 下 鼠标 时 要 前 往 的 链接 页 面 ， 如 图 13-34 所 示 。 


图 13-33 ”为 表格 的 单元 格 设置 背景 图 像 图 13-34 插入 鼠标 经 过 图 像 


入 单 击 【 确 定 】 按 钮 ， 将 光标 置 于 插入 的 鼠标 经 过 图 像 后 ， 连 续 按 Ctrl+Shift+Space 
键 ， 在 该 图 像 后 插入 适当 的 空格 。 然 后 用 同样 的 方法 插入 另 一 个 鼠标 经 过 图 像 ， 原 始 图 像 
为 N_btn21.jpg， 鼠 标 经 过 图 像 为 images/N_btn22.jpg， 要 链接 的 页 面 为 newsl.html。 

人 @ 将 光标 置 于 第 3 行 单元 格 中 , 在 其 中 插入 文本 项 目 列表 , 如 图 13-35 所 示 。 下 面 来 
设计 用 于 链接 的 CSS 样式 ， 在 【代码 】 视 图 的 <style> 标 签 中 插入 如 下 代码 : 


Slim 


font-family: "宋体 "; 
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font-weight: normal; 
Color: #693e25; 
text-decoration: none; 
font-size: 12px; 

4 

.link:hovert{ 
font-family: "宋体 "; 
font-weight: bold; 
color: #693e25; 
text-decoration: none; 


font—sizZe: 12p2? 


图 13-35 ”插入 文本 项 目 列表 


局 保存 并 预览 页 面 , 即 可 得 到 图 13-24 所 示 的 效果 。Newsl.html 页 面 的 设计 非常 简单 ， 


13.6 ”制作 “新 闻 中 心 ”栏目 的 内 容 页 面 


器 实 训 目标 
练习 XML 文档 的 创建 方法 以 及 Spry 数据 控件 的 用 法 。 
器 实 训 内 容 


户 只 需 将 news.html 页 面 男 存 为 new1.html， 然 后 修改 文本 项 目 列表 的 内 容 即 可 。 


制作 “新 闻 中 心 ”栏目 具体 信息 的 内 容 页 面 ， 制 作 好 的 页 面 效 果 如 图 13-36 所 示 。 将 
光标 移 到 左 侧 的 “新 闻 标 题 ”下 的 信息 条 目 上 ， 该 条 目的 颜色 发 生 改 变 ， 单 击 可 在 右 侧 内 


容 列 表 中 显示 具体 的 信息 。 


oa _ 


13-36 ”页面 预览 效果 


器 上 机 操作 详解 


人 @ 首先 来 创建 存储 新 闻 信息 的 XML 文档 。 选 择 【 文 件 】| 【新建 】 命 令 ,， 打开 【新 建 
文档 】 对 话 框 。 

加 在 【空白 页 】 下 选择 【XML】 页 面 类 型 ， 单 击 【 创 建 】 按 钮 ，【 文 档 】 窗 口中 将 
出 现 一 个 未 命名 的 XML 文人 编辑 文件 内 容 ， 如 图 13-37 所 示 。 


09 学 行 力 地 莹 闪 区 商丘 关 动 </c:: 
人 计 日子， 半天 14 对 26 分 ; 在 加 川 汶川 县 淆 生 S (部 寺 畔 ， 簿 号 北 训 、 江 次， 交州 于 连 、 青 海 

出 两 、 本 | 而 、 云南 ， 攻 和 、 渭 北 , 上 发、 重庆、 再 医 村 者 区 市 二 有 有 炬 站 ， 已 让 所 亚 本 全 人 负 # 和 | 产 烧 大 ” 稚 首 无 炒 无 京 中 有 的 

i Pi 中 要 会 珊 翁 厂 用 的 秽 尖 和 和 措 扣 ， 


be 了 仙 介 所 中 的 六 Ratk 丰 本 TAS <7137 
< 我 们 昨 痢 无 禾 江 看 失 所 的 人 们 -所 全 头 全 + 

ZL) 我 们 丁 呈 的 玫 晤 织 亦 现 

<11> 拓 fF 和 以 6 万 后 力 取 : 力 从 机 潜 往 你 天 机 场 ， 潜 惟 不 

ee 3 类 去 中 日 的 砷 气 营 S0 半 可- 1 

和 | 地 于 直人 网 了 址 加 人 在 作 本， 空 国生 共 节 机 好 相合 着 -一 方 有 齐 ， 狼 方 去 毁 - 的 时 心情 视 。 A 潜 
是 在 守信 若 上 和 P 息 ， 所 1 小 作答 提 0 入 们 IP 起 境 和 地， 有 垃 娃 充 状 I 女士 诬 :“ 刘 针尖 扒 各 ， 也许 通红 黎 一 个 他 往 商 e “1 已 械 星 届 号 2 误 
亿 坟 3 es 


和。 和 月 生计 半生 国 1 


工 生日 
mu RRR 人 和 六 区 妨 。 存 你 生日 的 这 一 天 ， 庆祝 壳 逢 相 全 作 同 事 对 有 和 于 生 各 省 * 天 人 不 运 生 向 到 费 的 产 月 ， 重 j3 直 未 ， 
EF 月 快 让 


13-37 ”编辑 XML 文档 内 容 


提示 : XML 文档 中 包含 两 个 属性 ，<title> 属 性 用 于 存储 新 闻 标 题 ，<content> 属 性 则 
用 于 存储 具体 信息 。 需 要 注意 的 是 ，<content> 中 的 内 容 有 的 带 有 HTML 标签 ， 可 以 通过 


CDATA 分 隔 符 来 包含 它们 。 

加 选择 【文件 】 | 【保存 】 命 令 ， 将 文件 保存 为 info.xml。 

入 下 面 来 创建 内 容 页 面 。 重复 步 怠 食 ， 在 【空白 页 】 下 选择 【HTML】 页 面 类 型 ， 在 
【布局 】 下 选择 【2 列 液态 ， 左 侧 栏 、 标 题 和 脚注 】， 单 击 【 创 建 】 按 钮 。【 文 档 】 窗 口 
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中 基于 该 CSS 布局 新 建 了 一 个 未 命 名 文档 ， 如 图 13- 3-38 所 示 。 
国 
sidebar1 内 容 ”主要 内 容 


2 Ry a 量 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent 
aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, 
at nonummy quam ante ac quam. Maecenas urna purus, fermentum 
id, molestie in, commodo porttitor, felis. Nam blandit quam ut 
lacus. Quisaue omare risus quis ligula. Phasellus tristique pumus a 

将 比 #sidebarl div augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, 

中 的 多 ,请 在 rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum 

#mainContent div et sapien vehicula nonummy. Suspendisse potenti. Fusce varius 

的 左 廊 毕 放置 一 个 廊 柜 。 urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, 
libero. In eget purus. Vestibulum ut nisl. Donec eu mi Sed turpis 
feugiat feugiat. Integer turpis orcu, pellentesque eget, cursus et, 

Donec eu mi sed fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, 

turpis feugiat molestie id, varius et, nibh. Donec nec libero 

‘eu Integer 

urpis 四 

palentesbe eoot， H2 级 别 的 标题 

Cursus ei 

i ut 

sapien, Fusce 

metus oe labore 
sollicitu 

molestie 位 varlus 


图 13.38 基于 CSS 布局 新 建 的 页 面 文档 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent 
aliquam, justo convallis lucfus rutrum, erat nulla fermentum diam, 
am ante ac quam. Maecenas urna purus, fermentum 
lis. Nam blandit quam ut 
hasellus tristique Pu 


人 @ 在 属性 检查 器 中 单 击 【 页 面 属性 】 按 钮 ， 打 开 【 页 面 属性 】 对 话 框 。 在 【外 观 】 类 
别 下 ， 将 【背景 颜色 】 设 置 为 上 582001， 单 击 【 确 定 】 按 钮 。 

@@ 将 光标 置 于 header 容器 的 标题 占 位 符 “ 标 题 "之 间 , 单 击 标签 选择 器 中 的 标签 <h1>， 
按 Delete 键 将 占 位 符 连同 标签 一 同 删除 。 用 同样 的 方法 删除 footer、mainContent、sidebarl 
容器 中 的 占 位 符 标签 及 其 内 容 ， 此 时 【文档 】 窗 口中 的 结果 如 图 13-39 所 示 。 


图 13-39 删除 页 面 中 的 文本 占 位 符 标 签 及 其 内 容 


人 @ 选择 【窗口 】 | 【Css 样式 】 命 令 ， 打 开 【CSS 样式 】 面 板 。 在 【全 部 】 样 式 规则 
列表 中 分 别 选中 【.twoCollLiqLtHdr #header hl】、【.twoCollLiqLtHdr #sidebarl h3】， 
【.twoCollLiqLtHdr #sidebarl p】、【.twoCollLiqLtHdr #footer p】, 按 Delete 键 将 这 些 CSS 
样式 规则 删除 。 

加 分 别 双击 【.twoCollLiqLtHdr 元 eader】、【 .twoCollLiqLtHdr #sidebarl 】 
【.twoCollLiqLtHdr #container】〗 样 式 规则 ， 在 打开 的 【CSS 规则 定义 】 对 话 框 中 ， 在 【 背 
可 分 类 下 将 【背景 图 像 】〗】 分 别 设置 为 I 1.jpg、N_bgl.jpg、Bg2.jpg。 此 时 【文档 】 窗 口 

的 结果 如 图 13-40 所 示 。 


图 13-40 设置 Div 容器 的 背景 样式 


人 @ 切换 到 【代码 】 视 图 ， 在 <style> 标 签 中 定义 后 面 将 要 用 到 的 CSS 样式 规则 


#dataTable td, #dataTable th{ padding: 5S5px; } 
Eh teoxt aligns Lefts 


cursor: pointer; 


bos_ 
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cursor: hand; 


.hoverRow, .selectRow{ 


background-color: #FF9900; 


cursor: pointer; 


cursor: hand; 


4 
A:link 


{ 


COLOR: #000000; TEXT-DECORATION: none 


} 


A:visited { 
COLOR: #000000; TEXT-DECORATION: none 


} 


A:hover 


{ 


COLOR: #b00000; TEXT-DECORATION: underline blink 


.STYLE3 


{ 


font-size: 100%; 


list-style-position: outside; 


list-style-image: url (images/point01.gif); 


罗 将 【文档 】 窗 口 切 换 到 【 拆 分 】 视 图 ， 将 光标 置 于 Div 容器 header 中 。 将 【插入 】 


面板 切换 到 


【常用 】 类 别 ， 单 击 【媒体 : SWF】〗 按 钮 ， 插 入 一 个 Flash 动画 。 


人 将 光标 置 于 footer 容器 中 , 单 击 【图 像 : 图 像 】 按 钮 , 插入 一 个 图 像 。 此 时 【文档 】 
窗口 如 图 13-41 所 示 。 


四 下 面 


13-41 ”插入 Flash 动画 和 图 像 


来 创建 Spry 数据 集 。 将 【插入 】 面 板 切 换 到 【Spry】 类 别 ， 单 击 【Spry 数据 


集 】 按 钮 ， 打开 【Spry 数据 集 】 对 话 框 。 


四 首先 


将 数据 集 命名 为 “infolist”， 在 【选择 数据 类 型 】 下 拉 列 表 框 中 选择 XML， 


然后 单 击 【 指 定数 据 文件 】 右 侧 的 【浏览 】 按 钮 , 将 前 面 创建 的 info.xml 作为 数据 源 。【 行 
元 素 】 列 表 框 中 显示 了 XML 文档 中 的 属性 。 选 中 “info” 元 素 , 可 查看 数据 是 否 正确 ， 如 
图 13-42 所 示 。 单 击 【 完 成 】 按 钮 。 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


的 四 大 十 万 人 - 谍 何 如 卡 去 对 贡 : 
一 ; 对 区 时 居 : <SPAN lang= "tn 


13-42 ”创建 Spry XML 数据 集 


翁 接 下 来 在 页 面 左 侧 创建 Spry 主 表格 。 将 光标 置 于 sidebarl 中 ， 在 【 绑 定 】 面 板 双 
击 infolist 数据 集 重新 打开 【spry 数据 集 】 对 话 框 ， 单 击 【下 一 个 】 按 钮 ， 保 持 默 认 设置 。 
单 击 【 下 一 个 】 按 钮 选中 【插入 表格 】 单 选 按钮 ， 单 击 【 设 置 】 按 钮 ,打开 【Spry 数据 
集 一 插入 表格 】 对 话 框 。 在 中 间 的 列表 框 中 选择 【content】 选 项 ， 单 击 按钮 【一 】 按 钮 将 
其 删除 。 将 【 甚 停 类 】 设 置 为 hoverRow， 将 【选择 类 】 设 置 为 selectRow。 选 中 【 单 击 行 
时 使 用 “更 新 ”详细 区 域 】 复 选 框 ， 如 图 13-43 左 图 所 示 。 

俯 单 击 【 确 定 】 按 钮 。 当 弹出 对 话 框 询问 是 否 创建 Spry 区 域 时 ， 单 击 【 确 定 】 按 钮 。 
此 时 sidebarl 容器 中 出 现 一 个 表格 。 删 除 占 位 符 “Title” ， 更 改 为 “新 闻 标 题 ”。 从 标签 
选择 器 中 单 击 标签 <table>， 选 中 插入 的 Spry 表格 。 在 属性 检查 器 中 的 【表格 】 下 拉 列 表 
框 中 选择 dataTable。 调 整 表格 宽度 和 表格 中 文本 对 齐 方式 ， 统 一 设置 为 居中 对 齐 ， 如 图 
13-43 右 图 所 示 。 

人 @ 最 后 我 们 来 创建 Spry 详细 显示 区 域 。 将 光标 置 于 mainContent 容器 中 ， 选 择 【 窗 
口 】|【 绑 定 】 命 令 ， 打 开 【 绑 定 】 面 板 。 在 infolist 数据 集 下 选中 【content】 选 项 ， 单 击 
底部 的 【插入 】 按 钮 。 


bos_ 


CE IC 
图 13-43 创建 Spry 主 显示 区 域 
7 从 标签 选择 器 中 单 击 标签 <div#mainContent>， 按 Ctrl+T 键 打开 快速 标签 编辑 器 ， 
输入 图 13-44 中 所 示 高 亮 部 分 的 代码 。 最 后 按 Enter 键 使 代码 生效 。 
码 保存 并 预览 页 面 ， 即 可 得 到 图 13-36 所 示 的 效果 。 


加 所 
el 有 LT hr [UDA Wn -jsmsane prK17 四 种 


图 13-44 ”快速 编辑 标签 代码 


13.7 ”制作 网 站 “谜底 女装 ”的 注册 页 面 


器 实 训 目标 
练习 Spry 选项 卡 式 面板 以 及 各 种 Spry 表单 验证 控件 的 用 法 。 
器 实 训 内 容 


首先 制作 “特许 加 盟 ” 页 面 ， 该 页 面 以 Spry 选项 卡 式 面板 为 容器 ， 在 不 同 选 项 卡 中 列 
出 了 “加 盟 优 势 ”、“ 加 盟 条件 ”、“ 加 盟 流程 ”的 具体 内 容 ， 如 图 13-45 所 示 。 


209 | 


Dreamweaver CS4 网 页 制作 与 网 站 组 建 简明 教程 


bo 


13-45 “特许 加 盟 ” 页 面 


ed sh shad 它 ， hey 所 示 。 


图 切换 到 其 他 选项 卡 
单 击 “ 特 许 加 盟 ” 页 面 底部 的 “立即 注册 ”链接 ， 可 进入 图 13-47 所 示 的 注册 页 面 。 


13-47 注册 页 面 


“第 13 章 实 训 。 
13.7.1 制作 “特许 加 盟 ” 页 面 


和 @ 打开 13.5 节制 作 好 的 news.html 文档 ， 选 择 【 文 件 】|【 另 存 为 】 命 令 ， 将 文档 另 
存 为 registhtml。 

各 在 oneColFixCtrContentMiddle Div 容器 中 ,删除 第 2 行 表格 中 的 两 个 鼠标 经 过 图 像 ， 
以 及 第 4 行 中 的 信息 项 目 列表 。 

介 用 鼠标 选中 第 2、3、4 行 单元 格 , 如 图 13-48 所 示 。 单 击 属性 检查 器 中 的 按钮 回 将 
它们 合并 。 

人 @ 切换 到 【 拆 分 】 视 图 ， 在 代码 中 将 合并 后 的 第 1、2、3 行 的 高 度 ( 即 【height】 属 性 ) 
设置 为 83、213 和 138。 

加 切换 到 【设计 】 视 图 ， 将 第 1、2、3 行 单元 格 的 背景 图 像 分 别 设置 为 A_titlel.jpg、 
N_bg2.jpg 和 N_bg3.jpg， 效 果 如 图 13-49 所 示 。 


图 13-48 合并 单元 格 图 13-49 重新 设置 背景 图 像 


人 @ 选择 【窗口 】| 【Css 样式 】 命 令 , 打开 【CSS 样式】 面板 。 在 【全 部 】 下 选 
中 .oneColFixCtrContentLeft 样式 规则 ， 在 属性 列表 中 将 【width】 属 性 更 改 为 335px。 用 同 
样 的 方法 将 .oneColFixCtrContentMiddle 样式 规则 的 【width】 属 性 更 改 为 323px， 另 外 添加 
【color】 属 性 ， 将 值 设置 为 #693e25。 这 样 oneColFixCtrContentMiddle 容器 中 的 文本 将 统 
一 使 用 该 颜色 。 

人 下 面 来 建立 Spry 选项 卡 式 面 板 。 将 光标 置 于 第 2 行 单元 格 中 。 将 【插入 】 面 板 切 
换 到 【Spry 类 别 】， 单 击 【Spry 选项 卡 式 面板 】 按 钮 。 

四 默认 只 显示 两 个 选项 卡 ， 名 称 为 “Tab1” 和 “Tab2”。 在 【文档 】 窗 口 直接 将 它 
们 重新 命名 为 “加 盟 优势 ”、“ 加 盟 条 件 ”。 

@@ 选中 创建 的 Spry 选项 卡 式 面板 ,在 属性 检查 器 中 【面板 】 区 域 单 击 【+】 按 钮 ， 添 
加 一 个 面板 ， 并 命名 为 “加 盟 流程 ”， 如 图 13-50 所 示 。 


1 
pe WN | 


ThrdE aesl wp 
且 袜 福 直 构件 


图 13-50 在 Spry 选项 卡 式 面板 中 添加 面板 


里 已 名 


办 页 面 中 默认 打开 的 是 “加 盟 优势 ”面板 ， 将 光标 置 于 面板 内 容 处 ， 即 “内 容 1” 文 
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本 占 位 符 处 ， 按 Delete 键 将 其 删除 ， 并 重新 输入 该 面板 的 内 容 ， 如 图 13-51 所 示 。 
妈 将 光标 移 到 “加 盟 条 件 ” 面板 标签 处 , 当 出 现 眼睛 图 标 时 单 击 , 即 可 切换 到 该 面板 ， 
修改 面板 的 具体 内 容 ， 如 图 13-52 所 示 。 


间 吕 生性 现 争 1 


了 主谋 地 对 累 汪 杆 梭 - 
| 措 共 市 场 生生 售 轩 ”站 由 几 声 大 机 4 

er teri 本 

Pra rr 甘于 的 币 国术 
式 ,这 到 计时 出 本 


RR 35 
方 半 的 者 

有 一 基础、 市 场所 四 有 力气 及 局 季 汪 县 力 1 

本 399 记 业 村 表 与 专业 依 鲁 

本 公 加 这 一 标 次 闫 二 、 执行 2 生 料 一 委 杰 放 谷 ， 


图 13-51 编辑 “加 盟 优势 ”面板 中 的 内 容 图 13-52 ”编辑 “加 盟 条 件 ”面板 中 的 内 容 


网 用 同步 又 侈 的 方法 编辑 “加 盟 流程 ”面板 中 的 内 容 。 

四 将 光标 置 于 第 3 行 单元 格 中 , 输入 “立即 注册 ”。 然 后 从 属性 检查 器 的 【样式 】 下 
拉 列 表 框 中 选择 【link】, 将 【大 小 】 设 置 为 18px, 将 【链接 】 目 标 页 面 设置 为 table.html。 

傣 保存 并 预览 页 面 ， 即 可 得 到 图 13-45 所 示 的 效果 。 


13.7.2 制作 注册 页 面 


人 @@ 选择 【新 建 】| 【文档 】 命 令 ， 基 于 【1 列 固定 ， 居 中 】CSS 布局 创建 一 个 HTML 
文档 。 

@@ 在 属性 检查 器 中 单 击 【 页 面 属性 】 按 钮 ， 打 开 【 页 面 属性 】 对 话 框 。 在 【外 观 】 分 
类 下 将 【文本 颜色 】 设 置 为 #693e25、【 背 景 颜色 】 设 置 为 #582001。 

加 选择 【窗口 】 | 【Css 样式 】 命 令 , 打开 【CSS 样式 】 面 板 。 在 【所 有 规则 】 下 选 
中 .oneColFixCtr #container 样式 规则 ， 为 其 添加 background-image 属性 ( 即 设置 背景 图 像 ) 
和 width 属性 ， 属 性 值 分 别 设置 为 Bg.jpg、434px。 

@@ 删除 【文档 】 窗 口中 所 有 的 文本 占 位 符 ， 然 后 输入 文本 “注册 页 面 ”,， 在 属性 检查 
器 中 从 【格式 】 下 拉 列 表 框 中 选择 【标题 2】， 然 后 将 其 居中 对 齐 ， 如 图 13-53 所 示 。 


13-53 ”设置 标题 


全 切换 到 【 拆 分 】 视 图 ， 将 光标 置 于 代码 中 标题 2 所 在 的 <h2> 结 束 标签 后 。 将 【 插 
入 】 面 板 切换 到 【表单 〗 类 别 ， 单 击 【 表 单 】 按 钮 。 

加 “注册 页 面 ”标题 后 出 现 一 个 表单 ,将 光标 置 于 表单 内 。 切 换 【 插 入 】 面 板 到 【党 
时 】 类 别 ， 单 击 【表格 】 按 钮 ， 打 开 【 表 格 】 对 话 框 。 将 【 行 数 】 设 置 为 9，【 列 数 】 设 
置 为 2， 其 他 保持 默认 设置 。 单 击 【 确 定 】 按 钮 。 

四 一 个 9 行 2 列 的 表格 将 充满 整个 表单 ,调整 列 间距 ,如 图 13-54 所 示 。 选 中 左 侧 列 
的 所 有 单元 格 ， 在 属性 检查 器 中 单 击 【 右 对 齐 】〗 按 钮 ， 以 便 将 这 些 单元 格 中 的 内 容 统一 靠 
齐 单 元 格 右 侧 。 


bz 


"第 13 章 实 训 。 


图 13-54 插入 表格 并 调整 列 间距 


全 将 光标 置 于 第 1 行 第 2 列 单元 格 中 , 切换 【插入 】 面 板 到 【表单 类别, 单 击 【Spry 
验证 文本 域 】 按 钮 ， 在 弹出 的 【输入 标签 辅助 功能 属性 】〗】 对 话 框 中 将 【标签 文字 】 设置 为 
“公司 名 称 : ”， 单 击 【 确 定 】 按 钮 。 表 单 中 将 出 现 插入 的 Spry 验证 文本 域 对 象 ， 选 中 标 


13-55 插入 “公司 名 称 ” 输 入 框 


@@ 选中 插入 的 文本 框 ， 从 标签 选择 器 中 单 击 标签 <spanksprytextfieldl>， 在 属性 检查 
器 中 对 Spry 验证 文本 域 控件 进行 设置 ， 选 中 【onBlur】 和 【必需 的 】 复 选 框 ， 如 图 13-56 
所 示 。 


| 
Fe Ee | ® 


DrvtertCisld 移民 ”| 蚊 下 于 团 orear 站 onCharge | onsubmt 
一 主 写 比 者 柱 因明 最 小 子 各 数 生 个 百 园 wm 的 
要 示 | 最 太子 开 数 最 大 对 | 了] 强硬 式 2 


13-56 ”设置 “公司 名 称 ” 文 本 框 的 参数 


人 友 用 同步 骤 侈 的 方法 分 别 在 第 2、3、4、5 行 单元 格 中 插入 “公司 电话 ”、“ 注 册 密 
码 ”、“ 请 重新 输入 密码 ”、“ 电 子 邮件 ”输入 框 ， 它 们 都 是 Spry 验证 文本 域 控件 ， 如 图 
13-57 所 示 。 属 性 检查 器 中 的 设置 如 图 13-58 所 示 。 


图 13-57 添加 其 他 文本 输入 框 
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13-58 设置 各 个 Spry 验证 文本 域 控件 的 属性 


注意 : 每 个 Spry 验证 文本 域 控件 都 包含 了 一 个 label 控件 和 一 个 input 控件 ,对 于 “ 注 
册 密 码 ” 和 “请 重新 输入 密码 ”文本 框 ， 为 了 使 访客 在 输入 时 不 显示 出 来 ， 可 以 选择 这 两 
个 文本 框 (而 不 是 它们 所 在 的 Spry 验证 文本 域 控件 ), 然后 在 属性 检查 器 中 选中 【密码 】 单 
选 按钮 。 

加 将 光标 置 于 第 5 行 第 2 列 单元 格 中 ， 单 击 【Spry 验证 文本 区 域 】 按 钮 ， 在 打开 的 
对 话 框 中 将 【标签 文本 】 设 置 为 “通信 地 址 : ”， 单 击 【确定 】 按 钮 。 光 标 处 将 出 现 一 个 
文本 区 域 输入 框 ， 选 中 标签 文本 ， 从 标签 选择 器 中 单 击 标签 <label> ， 将 其 移 到 左 侧 表格 ， 


如 图 13-59 所 示 。 | 


图 13-59 插入 “通信 地 址 ”输入 框 


对 于 文本 区 域 , Dreamweaver 默认 的 字符 宽度 是 45 个 字符 , 行 数 为 5 行 , 读者 如 果 需 
要 调整 “通信 地 址 ”输入 框 的 高 度 和 宽度 ， 可 通过 属性 检查 器 进行 设置 。 

四 将 光标 置 于 第 6 行 第 1 列 单元 格 中 , 输入 文本 “公司 性 质 : ”。 将 光标 置 于 右 侧 单 
元 格 中 ， 单 击 【 单 选 按钮 组 】 按 钮 ， 打 开 【 单 选 按钮 组 】 对 话 框 。 设 置 两 个 按钮 ， 并 使 用 
【换行 符 】 来 布局 ， 如 图 13-60 左 图 所 示 。 

网 单 击 【 确 定 】 按 钮 ， 单 元 格 中 出 现 两 个 单 选 按钮 ， 它 们 换行 显示 。 切 换 到 【 拆 分 】 
视图 ， 删除 每 个 单 选 按 钮 代码 后 面 的 <br/> 标 签 ， 从 而 使 得 它们 能 在 一 行 中 显示 ,结果 如 图 
13-60 右 图 所 示 。 


万 下 .条 时 二 和 5 
[3 


图 13-60 插入 单 选 按 钮 组 


“第 13 章 实 训 。 


侈 用 光标 选中 第 7 行 的 两 个 单元 格 , 将 它们 合并 。 然后 将 【插入 】 面 板 切换 到 【布局 】 
类 别 ， 单 击 【 绘 制 AP Div】 按 钮 ， 在 第 7 行 单元 格 中 绘制 一 个 AP Div。 

估 将 光标 置 于 绘制 的 AP Div 中 ， 将 【插入 】 面 板 切换 到 【表单 】 类 别 。 单 击 【字段 
集 】 按 钮 ， 在 表单 中 插入 一 个 标签 为 “经 营业 务 ” 的 字段 集 。 

人 @ 将 [文档] 窗口 切换 到 【 拆 分 】 视 图 ， 将 光标 置 于 标签 </ficldset> 之 前 , 单 击 【Spry 
验证 复 选 框 】 按 钮 ， 将 标签 文字 设置 为 “电子 商务 ”。 将 光标 置 于 Spry 验证 复 选 框 控件 中 
的 “ 书 名 ” 复 选 框 后 ， 单 击 【 复 选 框 】 按 钮 ， 将 标签 文字 设置 为 “IT 支持 ”， 接 着 添加 其 
他 复 选 框 ， 如 图 13-61 所 示 。 
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图 13-61 插入 Spry 验证 复 选 框 


亿 从 标签 选择 器 中 单 击 标签 <span#sprycheckbox1>, 选 择 Spry 验证 复 选 框 控 件 及 其 包 
含 的 所 有 复 选 框 。 在 属性 检查 器 中 , 启用 【强制 范围 】 复 选 框 ,并 将 【最 小 选择 数 】 和 【最 
大 选择 数 】 分 别 设置 为 1 和 4， 最 后 启用 【OnBlur】 复 选 框 。 

公 将 光标 置 于 第 8 行 单 元 格 中 ,分 别 在 左 列 和 右 列 的 单元 格 中 插入 图 像 Ta_sumbitjpg 
和 Ta_reset.jpg， 最 后 保存 并 预览 页 面 ， 得 到 的 效果 如 图 13-62 所 示 。 


图 13-62 制作 好 的 注册 页 面 


13.8 ”申请 空间 并 发 布 网 站 


器 实 训 目标 
练习 申请 网 站 空间 并 上 传 站 点 。 
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器 实 训 内 容 

首先 介绍 如 何 申请 “中 联网 ”网 站 提供 的 免费 域名 和 空间 服务 ， 接 下 来 介绍 通过 FTP 
软件 将 本 地 站 点 上 传 到 远程 服务 器 上 的 过 程 ， 最 后 介绍 对 网 站 进行 同步 更 新 的 方法 以 及 如 
何 宣传 自己 的 网 站 。 
中 上 机 操作 详解 

@@ 下 面 首先 介绍 申请 域名 和 免费 网 站 空间 的 步骤 。 打 开 浏 览 器 ， 在 地 址 栏 中 输入 
http://3326.com/ 并 按 Enter 键 , 打开 “中 联网 ”的 网 站 首页 ,参照 第 11 章 的 例 11-1 申请 网 
站 空间 和 域名 。 ea i 

@@ 参照 例 11-3 所 示 的 方法 配置 “谜底 女装 ”的 远 | 
程 FTP 服务 器 。 i 

加 下 面 介绍 如 何 通过 FTP 软件 将 站 点 上 传 到 远程 | "下 
FTP 服务 器 上 。 首先 用 户 需要 在 本 地 机 器 上 安装 FTP 软 |‖ ew sis esive em 
件 ， 这 里 以 FlashFXP 为 例 。 

人 @ 启动 FlashFXP,， 在 主 界面 选择 【会 话 】|【 快 速 = 
连接 】 命 令 ， 打开 【 快 速 连接 】 对 话 框 。 在 【常规 】 选 ”图 13-63 建立 与 远程 FTP 服务 器 的 连接 
项 卡 中 输入 FTP 服务 器 路 径 、 管 理 员 给 您 的 登录 用 户 
名 、 密 码 ， 并 设置 好 远 端 路 径 ， 如 图 13-63 所 示 。 单 击 【 连 接 】 按 钮 。 

@ 此 时 ，FlashFXP 主 界面 的 右 侧 窗 格 将 显示 远 端 文件 ， 在 左 侧 导 航 到 要 上 传 站 点 所 
在 的 目录 , 选中 站 点 目录 下 的 所 有 文件 , 将 它们 拖 到 右 侧 远 端 文件 夹 下 ，FlashFXP 开始 进 
行 连接 并 上 传 ， 如 图 13-64 所 示 。 主 界面 底部 还 显示 了 上 传 的 速率 等 。 


13-64 上 传 本 地 站 点 到 FTP 远程 服务 器 


加 上 传 完毕 后 ， 关 闭 FlashFXP。 接 下 来 介绍 对 站 点 进行 同步 更 新 的 方法 。 首 先 在 


pe 
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Dreamweaver 的 【文件 】 面 板 中 打开 “谜底 女装 ”本 地 站 点 。 单 击 按钮 [ 国 | 以 展开 本 地 和 远 
端 站 点 ， 如 图 13-65 示 。 
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图 13-65 查看 本 地 站 点 和 远 端 站 点 


加 选择 【站 点 】| 【同步 〗 命 令 ， 打开 【 同 步 文件 】 对 话 框 。 在 【同步 】 下 拉 列 表 框 
中 选择 【整个 “谜底 女装 ”站 点 】， 在 【方向 〗 下 拉 列 表 框 中 选择 【放置 较 新 的 文件 到 远 
程 】 选 项 ， 如 图 13-66 所 示 。 

注意 : 如 果 选 中 了 【删除 本 地 驱动 器 上 没有 的 远 端 文件 】〗 复 选 框 ，Dreamweaver 会 自 
动 删除 远程 站 点 和 本 地 站 点 中 没有 对 应 的 任何 文件 。 

各 单 击 【 预 览 】 按 钮 ，Dreamweaver 会 自动 检测 本 地 站 点 中 用 户 所 作 的 改动 ， 如 图 
13-67 所 示 。 用 户 可 以 确定 需要 删除 、 上 传 或 下 载 的 文件 。 如 果 不 希 望 更 新 某 个 文件 ， 可 
选中 它 ， 然 后 单 击 下 方 的 按钮 更 改 其 状态 ， 如 图 13-67 所 示 。 

各 单 击 【确定 】 按钮 ，Dreamweaver 会 自动 将 更 改 的 文件 更 新 至 远程 站 点 。 

人 @ 如 果 用 户 需 要 删除 远程 站 点 或 本 地 站 点 中 的 某 个 文件 , 可 直接 选中 它 右 击 , 然后 在 
弹出 的 菜单 中 选择 【编辑 】|【 删 除 】 命 令 。 


图 13-66 【同步 文件 】 对 话 框 图 13-67 选择 要 更 新 的 文件 


友 最 后 , 可 参照 例 11-6 所 示 的 方法 在 google 搜索 引擎 中 进行 注册 。 如 果 读 者 有 精力 ， 
还 可 通过 发 帖 、QQ 群发 、 发 布 广告 等 方式 对 自己 的 站 点 进行 宣传 。 


附录 A 


CSS 选择 符 


(1) 类 型 选择 符 


所 谓 类 型 选择 符 ， 是 指 以 网 页 中 已 有 的 标签 类 型 作为 名 称 的 选择 符 ， 例 如 : body{}、 
div{}、span 们 等， 它们 将 控制 页 面 中 所 有 的 body、div 和 span 对 象 的 显示 。 


(2) 群 组 选择 符 


除了 可 以 对 单个 XHTML 对 象 进行 样式 指定 外 ， 还 可 以 对 一 组 对 象 以 相同 的 样式 进行 
指派 ， 例 如 : 


hl,h2,h3,p,span, P 

{ 
font-size:12px; 
font-family:arial; 


! 


上 面 代码 中 使 用 逗号 对 选择 符 进 行 分 隔 ， 使 得 页 面 中 所 有 的 hl、h2、h3、span 以 及 Pp 
对 象 都 具有 相同 的 样式 。 这 样 一 来 ， 对 于 页 面 中 需要 使 用 相同 样式 的 地 方 ， 只 需要 编写 一 
次 样式 表 即 可 实现 ， 从 而 改善 了 CSS 代码 的 结构 。 


(3) id 和 class 选择 符 


id 和 class 选择 符 均 是 CSS 提供 的 由 我 们 自 定 义 标签 名 称 的 一 种 选择 符 模 式 ， 我 们 可 
以 使 用 id 和 class 对 页 面 中 的 XHTML 标签 进行 自 定义 名 称 ， 从 而 达到 扩展 XHTML 标签 
和 组 合 XHTML 标签 的 目的 。 例 如 对 于 XHTML 中 的 hl 标签 而 言 ， 如 果 使 用 id 选择 符 
那么 <hl id="pl"> 及 <hl id="p2"> 对 于 CSS 来 讲 是 两 个 不 同 的 元 素 ， 从 而 达到 扩展 的 目的 。 
用 户 自 定 义 名 称 也 有 助 于 细 化 页 面 自身 的 界面 结构 ， 使 用 符合 页 面 需求 的 名 称 来 进行 结构 
设计 ， 从 而 增强 代码 的 可 读 性 。 

id 选择 符 是 根据 DOM 文档 对 象 模型 原理 所 产生 的 选择 符 类 型 ， 对 于 一 个 页 面 而 言 ， 
其 中 的 每 一 个 标签 或 其 他 对 象 ， 均 可 以 使 用 “id=""” 的 形式 对 其 id 属性 进行 名 称 指派 。id 
的 基本 作用 是 对 每 个 页 面 中 唯一 出 现 的 元 素 进行 定义 ， 如 可 以 将 导航 条 命名 为 nav， 将 网 
页 的 头 部 和 底部 命名 为 header 和 footer 等 。 

注意 : id 可 以 理解 为 一 个 标识 ， 在 页 面 中 这 个 标识 只 能 使 用 一 次 。 也 就 是 说 ， 不 能 对 
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两 个 或 两 个 以 上 的 标签 使 用 同一 个 id 名 称 。 
例如 : 


<div id="content"></div> 


上 面 的 代码 对 XHTML 中 的 一 个 Div 标签 指定 了 名 为 content 的 id。 在 CSS 样式 中 ， 
id 选择 符 使 用 # 符 号 进行 标识 。 如 果 需 要 对 id 为 content 的 标签 设置 样式 , 可 使 用 如 下 格式 : 
#content 
{ 
font-size:14px; 
line-height:130%; 
1 


如 果 说 id 是 XHTML 标签 的 扩展 的 话 ， 那 么 class 应 该 是 对 XHTML 多 个 标签 的 一 种 
组 合 。class 在 C++、C# 中 为 “类 ”， 相 当 于 对 象 的 模板 。 对 于 网 页 设计 而 言 ， 可 以 通过 对 
XHTML 标签 使 用 “class=""” 的 形式 对 class 属性 进行 名 称 指派 。 与 id 不 同 的 是 ，class 允 
许 重 复 使 用 ， 例 如 页 面 中 的 多 个 元 素 ， 都 可 以 使 用 同一 个 class 来 定义 ， 如 下 所 示 : 


<div class="pl"></div> 
<hl class="pl"></h1> 
<h3 class="pl"></h3> 


使 用 class 的 好 处 是 ， 对 于 不 同 的 XHTML 标签 ，CSS 可 以 直接 根据 class 名 称 来 进行 
样式 指派 ， 例 如 : 
pl 
Margin : 1l0px ; 
Background-color : blue ; 
} 
class 在 CSS 中 以 使 用 点 符号 “.” 加 上 class 名 称 的 形式 进行 样式 指派 。 无 论 是 什么 
XHTML 标签 ， 页 面 中 所 有 使 用 了 class="p1" 的 标签 均 使 用 此 样式 进行 设置 。class 选择 符 
也 是 CSS 代码 重用 性 的 良好 体现 ， 多 个 标签 均 可 以 使 用 同一 个 class 来 进行 样式 指派 ， 而 
不 用 对 每 一 个 编写 样式 代码 。 


(4) 包含 选择 符 


当 我 们 仅仅 相对 某 一 个 对 象 中 的 子 对 象 进行 样式 定义 时 ， 可 以 使 用 包含 选择 符 。 包 含 
选择 符 指 选择 符 组 合 中 前 一 个 对 象 包含 后 一 个 对 象 , 对 象 之 间 使 用 空格 作为 分 隔 符 , 例如 : 


hl span{font-weight:bold;} 
之 后 可 以 对 hl 下 面 的 span 进行 样式 指派 ， 应 用 到 XHTML 中 是 如 下 格式 : 


<h1> 这 是 我 们 的 一 段 文 本 </span> 这 是 span 内 的 文本 </span></h1> 
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<h1> 单 独 的 hl1</h1> 

<span> 单 独 的 span</span> 

<h2> 被 h2 标签 套用 的 文本 <span> 这 是 h2 下 的 span</span></h2> 

hl 标签 之 下 的 span 标签 将 被 应 用 font-weight: bold 的 样式 设置 。 注 意 : 仅仅 对 有 此 
结构 的 标签 方式 有 效 ; 对 于 单独 存在 的 hl 或 是 单独 存在 的 span， 以 及 其 他 非 hl 标签 下 属 
的 span 对 象 ， 均 不 会 应 用 此 样式 。 

使 用 包含 选择 符 就 可 以 避免 过 多 的 id 和 class 的 设置 ， 直 接 对 所 需要 设置 的 元 素 进 行 
样式 设置 即 可 。 包 含 选择 符 除了 可 以 两 者 包含 外 ， 还 可 以 多 级 包含 ， 例 如 : 


body hl span strong{font-weight:bold;} 
(5) 标签 指定 式 选 择 符 

如 果 既 想 使 用 id 或 class 选择 符 ， 又 想 同时 使 用 标签 选择 符 ， 则 可 以 使 用 如 下 格式 : 

hi#content{} 

上 述 代 码 针 对 所 有 id 为 content 的 hl 标签 。 

hl.pl{} 


上 述 代 码 表示 针对 所 有 class 为 pl 的 hl 标签 。 

提示 : 标签 指定 式 选择 符 在 对 标签 选择 的 精确 度 上 介 于 标签 选择 符 id 和 class 之 间 ， 
是 一 种 经 常 使 用 的 选择 符 形式 。 
(6) 组 合 选 择 符 


对 于 前 面 介绍 的 所 有 CSS 选择 符 而 言 , 无 论 是 什么 样 的 选择 符 , 都 可 以 进行 组 合 使 用 ， 
例如 : 


hl#content h2{} 


表示 id 为 content 的 hl 标签 下 的 所 有 h2 标签 。 

由 此 可 见 ，CSS 在 选择 符 的 使 用 上 可 以 说 是 非常 自由 ， 根 据 页 面 需求 ， 您 可 以 灵活 使 
用 各 种 选择 符 进行 设计 。 
(7) 伪 类 和 伪 对 象 

伪 类 和 伪 对 象 是 一 种 特殊 的 类 和 对 象 , 它 由 CSS 自动 支持 , 属于 CSS 的 一 种 扩展 类 和 
对 象 。 它 们 的 名 称 不 能 由 用 户 自 定义 ， 在 使 用 时 只 能 按照 标准 格式 进行 应 用 。 例 如 : 

a: hover{background-color: #333333; } 

伪 类 和 伪 对 象 由 以 下 两 种 形式 组 成 : 

? 选择 符 : 伪 类 

? 选择 符 : 伪 对 象 


bzo 
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上 面 代码 中 的 hover 便 是 一 个 伪 类 ， 用 于 指定 链接 标签 a 的 鼠标 移 上 时 的 状态 。CSS 
内 置 了 几 个 标准 的 伪 对 象 和 伪 类 ， 用 于 用 户 的 样式 定义 ， 如 表 A-1 所 示 。 


表 A-1 CSS 标准 伪 类 和 伪 对 象 
伪 对 象 说 明 说 明 


对 象 被 用 户 点 击 和 点 击 释放 之 间 的 
样式 


设置 某 一 个 对 象 之 后 的 内 容 


:active 


:Visited 链接 对 象 被 访问 后 的 样式 :first-letter | 设置 对 象 内 的 第 一 个 字符 的 样式 


:focus 对 象 成 为 输入 焦点 时 的 样式 :first-line | 设置 对 象 内 第 一 行 的 样式 


-first-ehild | 对 象 的 第 一 个 子 对 象 的 样式 设置 某 一 个 对 象 之 前 的 内 容 
Link | 链接 标签 a 未 被 访问 前 的 样式 


-hover 。 | 对 象 在 鼠标 移 上 时 的 样式 一 一 
-first | 对 于 页 面 的 第 一 页 使 用 的 样式 
实际 上 , 除了 用 于 链接 样式 控制 的 :hover、:active 几 个 伪 类 外 ， 大 多 数 伪 类 和 伪 对 象 在 


实际 应 用 中 并 不 常见 。 大 家 所 接触 到 的 CSS 布局 中 ,大 部 分 是 关于 排版 和 样式 的 ， 对 于 伪 
类 和 伪 对 象 所 支持 的 多 数 属性 很 少 用 到 。 


(8) 通 配 选 择 符 


如 果 用 户 接触 过 DOS 命令 或 是 熟悉 Word 中 的 替换 功能 ， 则 对 通配符 应 该 不 陌生 。 通 
配 符 是 指使 用 字符 代替 不 确定 的 字 ， 例 如 在 DOS 命令 中 ， 使 用 “*.*” 表 示 所 有 文件 ， 使 
用 “*.bat” 表 示 所 有 扩展 名 为 bat 的 文件 。CSS 中 的 通配符 也 使 用 * 作 为 关键 字 ， 使 用 方法 
如 下 : 


*{color: blue; } 


* 号 表示 所 有 对 象 ， 包 含 所 有 不 同 id、 不 同 class 的 XHTML 标签 。 上 面 中 的 代码 会 使 
页 面 中 所 有 对 象 使 用 蓝 色 的 字体 。 


附录 B 


HTML 常见 标签 及 说 明 


HTML 是 一 种 网 页 标记 语言 ,通过 运用 标签 使 页 面 达到 预期 的 显示 效果 .了 解 了 HIML 
标签 ， 便 了 解 了 HIML。 
表 B-1 文本 标签 及 说 明 


标 签 作 用 备 注 
排版 标签 
《!-- 注 解 --> O 说 明 标签 为 文档 加 上 说 明 ， 但 不 被 显示 
<p> O 段落 标签 为 文本 、 表 格 等 之 间 留 一 空白 行 


<br> 使 文本 、 表 格 等 显示 在 下 一 行 
<h> 插入 一 条 水 平 线 
<center> 使 文本 、 表 格 等 居中 显示 反对 
<pre> 使 文本 按照 原始 码 的 排列 方式 显示 
<div> 设置 文本 、 表 格 等 的 摆 放 位 置 
<nobr> 使 文本 不 因 太 长 而 绕 行 
<wbr> 预 设 折 行 部 位 
字体 标签 
<strong> 将 文本 定义 为 语气 更 强 的 强调 的 内 容 
<b> 实现 文本 加 粗 效果 
<em> 将 文本 定义 为 强调 的 内 容 


@lele@el@loOolO 


<i> 斜体 标签 实现 文本 斜体 效果 
<t> 打字 字体 加 上 底线 
<h1>/<h2>/<h3> 一 /二 /三 /四 /五 | 实现 标题 效果 ， 级 数 越 低 ， 字 体 越 大 、 反对 
<h4>/<h5>/<h6> /六 级 标题 标签 ”| 越 粗 、 越 宽 
<font> 字形 标签 设置 字形 、 大 小 、 颜 色 反对 
<basefont> 基准 字形 标签 设置 所 有 字形 、 大 小 、 颜 色 反对 
<big> 使 字体 稍微 放大 
<small> 字体 缩小 使 字体 稍微 缩小 
<strike> 添加 删除 线 为 字体 加 一 删除 线 反对 
<code> 程序 代码 定义 计算 机 代码 文本 
<kbd> 键盘 字 字体 稍微 加 宽 
<samp> 字体 稍微 加 宽 ， 单 一 空白 


斜体 效果 


<var> 
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( 续 表 ) 
标 签 意义 作 用 备 注 
<cite> © 传记 引述 斜体 效果 
<blockquote> © 引述 文字 区 块 缩 排 字体 
<dfn> 全 术语 定义 斜体 效果 
<address> @ 地 址 标签 斜体 效果 
<sub> © 下 标 字 化 学 元 素 符号 
<sup> © 上 标 字 指数 (平方 、 立 方 等 ) 
列表 标签 
<ol> 清单 项 目 将 以 数字 、 字 母 顺序 排列 
<ul> @ 无 序列 表 清单 项 目 将 以 圆 点 排列 
<li> O 列表 项 目 每 一 标签 表示 一 项 清单 项 目 
<menu> © 选单 列表 清单 项 目 将 以 圆 点 排列 反对 
<dir> 清单 项 目 将 以 圆 点 排列 反对 
<dt> O 定义 条 目 表示 该 项 定义 的 标题 
<dd> O 定义 内 容 表示 定义 内 容 


在 表 B-1 中 ，@ 表 示 该 标签 是 围 堵 标 签 ， 即 需要 关闭 标签 。 〇 表示 该 标签 是 空 标签 ， 
即 不 需要 关闭 标签 。 反 对 表示 该 标签 不 为 W3C 所 赞同 ,通常 是 Internet Explorer 或 Netscape 
Communicator 自 定 的 ， 且 已 为 多 数 浏览 器 所 支持 ， 但 HIML 标准 中 有 其 他 功能 或 者 更 好 
的 选择 。 

表 B-2 图 像 标 签 及 说 明 
| 0。 | 图形 标签 。 ”| 用 以 插入 图 形 及 设 定 图 形 属性 | 


<background> | 背景 图 像 标 签 | 用 以 插入 背景 图 像 


<img> 标 签 并 不 能 真正 地 将 图 像 插 入 HTML 文档 中 ， 而 是 需要 为 标签 中 的 src 属性 赋 
值 。 这 个 值 可 以 是 图 像 文件 的 文件 名 ， 也 可 以 是 图 像 文件 在 网 页 中 的 路 径 。 网 页 背景 有 两 
种 情况 ， 一 种 是 背景 图 像 ， 一 种 是 背景 颜色 。 这 两 种 情况 均 属 于 网 页 的 属性 。 所 以 网 页 背 
景 图 像 background 和 bgcolor 是 属于 <body> 标 签 中 的 属性 。 
表 B-3_ 表格 标签 及 说 明 
标 签 意  》 作 用 备注 
<table> 设 定 该 表格 的 各 项 参数 
<caption> 做 成 一 行 通 列 以 填 入 表格 标题 
< 设 定 该 表格 的 列 
<td> 表格 栏 设 定 该 表格 的 行 


<th> 表格 标 头 相当 于 <td>， 但 其 中 的 字体 会 变 粗 


Dw 


Dreamweaver CS4 网 页 制 


与 网 


签 类 型 意 义 作 用 


链接 标签 


链接 标记 


加 入 链接 


<base> O 〇 


指定 一 个 显示 URL, 用 于 解析 对 于 外 部 


基准 标记 
源 的 链接 和 引用 ， 如 图 像 和 样式 表 


<map> 


影像 地 图 


<area> 
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一 — 影像 地 图 名 称 | 设置 影像 地 图 的 名 称 
链接 区 域 。 | 设置 各 链接 区 域 


